Как добавить надстрочный текст в поле ввода HTML, нажав кнопку? - PullRequest
Новая
       27

Как добавить надстрочный текст в поле ввода HTML, нажав кнопку?

0 голосов
/ 24 сентября 2018

Я задаю вопрос, где люди должны вводить ответы, содержащие обычный текст и надстрочные знаки.Я полагаю, что лучший способ сделать это - создать кнопку, которая позволила бы пользователям помещать текст в верхний индекс, а затем экранировать верхний индекс, но я понятия не имею, как это сделать, и чтобы текст отображался как верхний индекс.

Это то, что я имею до сих пор: 

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>

Проблемы заключаются в том, что он каждый раз перезаписывает содержимое ввода, и я не могу получить что-либо в верхнем индексе.

1 Ответ

0 голосов
/ 25 сентября 2018

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