Superscript in text type input field

Question

I have an HTML input field like this:

<input id="op" type="text" value="0" /> 

I want to update the value of this field dynamically with some string containing a superscript. This did not work, and I tried it.

 document.getElementById("op").value="a<sup>3</sup>" //don't work document.getElementById("op").innerHTML="a<sup>3</sup>" //don't work 

How can I make this work? I could try to imagine the others, but since I am already forced to ask about it, I would like to tell you what I'm going to do.

  var x=3; var y=2; document.getElementById("op").innerHTML="a<sup> xy </sup>"; 

Answer 1

What about the plugin:

 $.fn.superScript = function() { var chars = '+−=()0123456789AaÆᴂɐɑɒBbcɕDdðEeƎəɛɜɜfGgɡɣhHɦIiɪɨᵻɩjJʝɟKklLʟᶅɭMmɱNnɴɲɳŋOoɔᴖᴗɵȢPpɸrRɹɻʁsʂʃTtƫUuᴜᴝʉɥɯɰʊvVʋʌwWxyzʐʑʒꝯᴥβγδθφχნʕⵡ', sup = '⁺⁻⁼⁽⁾⁰¹²³⁴⁵⁶⁷⁸⁹ᴬᵃᴭᵆᵄᵅᶛᴮᵇᶜᶝᴰᵈᶞᴱᵉᴲᵊᵋᶟᵌᶠᴳᵍᶢˠʰᴴʱᴵⁱᶦᶤᶧᶥʲᴶᶨᶡᴷᵏˡᴸᶫᶪᶩᴹᵐᶬᴺⁿᶰᶮᶯᵑᴼᵒᵓᵔᵕᶱᴽᴾᵖᶲʳᴿʴʵʶˢᶳᶴᵀᵗᶵᵁᵘᶸᵙᶶᶣᵚᶭᶷᵛⱽᶹᶺʷᵂˣʸᶻᶼᶽᶾꝰᵜᵝᵞᵟᶿᵠᵡᵸჼˤⵯ'; return this.each(function() { this.value = this.value.replace(/<sup[^>]*>(.*?)<\/sup>/g, function(x) { var str = '', txt = $.trim($(x).unwrap().text()); for (var i=0; i<txt.length; i++) { var n = chars.indexOf(txt[i]); str += (n!=-1 ? sup[n] : txt[i]); } return str; }); }); } 

called:

 $('input').superScript(); 

It may also be associated with keyboards, etc., and converted fairly easily to plain javascript, not jQuery, but I just did it, so if it works, change it to suit your needs?

Fiddle

Answer 2

<input> not a container, so it does not contain "html".

The value <input> attribute must be plain text, so you cannot do what I suppose you are trying.

However, there are workarounds of varying utility, depending on what you really need to do. See HTML superscript text <input type = "submit" />

Alternatively, you can also use the value of the “editable” content in the <div> for the value. See https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable