javascript - Superscript in input field of text type

Question

I have a 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 superscript. It did not work and I tried this.

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 get this to work? I could have tried to figure the rest myself but since I am already forced to ask this, I would like to tell what I am planning to do.

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

Answer 1

How about a plugin:

$.fn.superScript = function() {
    var chars = '+?=()0123456789Aa???ɑ?Bbc?DdeEe?????fGgɡ?hH?Ii????jJ??KklL???Mm?Nn????Oo?????Pp?rR???s??Tt?Uu???????vV??wWxyz?????βγδθφχн???',
        sup   = '??????123???????????????????????????????????????????????????????????????????????????????????????????????????????????????????';

    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 like:

$('input').superScript();

Could probably be bound to keyup etc as well, and rather easily converted to plain javascript and not jQuery, but I just made it, so if it works, modify it to suit your needs ?

FIDDLE