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

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

1 个答案: