时间戳

首页 > 解决方案 > 如何通过按下按钮将上标文本添加到 HTML 输入框？

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

问题描述

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

这是我到目前为止所拥有的：

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>

问题是它每次都会覆盖输入中的内容，而我在上标中什么也得不到。

标签： javascriptjqueryhtmlinputsuperscript

解决方案

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

推荐阅读