javascript - 如何通过按下按钮将上标文本添加到 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 样式的内容。它仅支持纯纯文本值。但你可以做点什么。而不是input您可以使用标签 div标记为 contenteditable属性如下:

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()">