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

Question

I am making a question where people have to input answers that have normal text and superscripts in them. I figure the best way to do this would be to make a button that would enable users to put text in a superscript and then escape the superscript but I have no idea how to go about this and have the text show as a superscript.

This is what I have so far:

 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> 

The issues are that it overwrites the content in the input each time and I can't get anything in the superscript.

Answer 1

<input> field can not display HTML styled content. It supports pure plain text values only. But something you could do. Instead of input tag you can use div tag with contenteditable atribute like follows:

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