如何通过按下按钮将上标文本添加到 HTML 输入框？

Question

我提出了一个问题，人们必须输入其中包含正常文本和上标的答案。我认为最好的方法是制作一个按钮，使用户能够将文本放在上标中，然后转义上标，但我不知道如何去做并让文本显示为上标。

这是我目前拥有的：

function ButtonClick_Test()
{
    document.getElementById("result").value = ' 1s<sup>2</sup>';
}

<form>
    Click Here:<br/>
    <input type="button" value="Click Here" name="no" onclick="ButtonClick_Test()">
    <input type="text" id="result" size="20" value="a">
</form>

问题是它每次都会覆盖输入中的内容，我无法在上标中获取任何内容。

Answer 1

<input> 字段无法显示 HTML 样式的内容。它仅支持纯纯文本值。但是你可以做的事情。您可以使用具有 contenteditable 属性的 div 标签代替 input 标签，如下所示：

function ButtonClick_Test()
{
    document.getElementById("result").innerHTML = ' 1s<sup>2</sup>';
}

#result
{
    border: 1px solid gray;
    display: inline-block;
    width: 200px
}

<div id="result" contenteditable="true"></div>
<input type="button" value="Click Here" name="no" onclick="ButtonClick_Test()">

如何通过按下按钮将上标文本添加到 HTML 输入框？

How to add superscript text to an HTML input box by pressing a button?

html

javascript

jquery

input

superscript