文本类型的输入字段中的上标

时间:2013-07-16 17:52:35

标签: javascript html

我有一个像这样的HTML输入字段:

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

我想用一些包含上标的字符串动态更新该字段的值。它没用,我试过了。

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

我怎样才能让它发挥作用?我本可以尝试自己计算其余部分,但由于我已被迫问这个问题,我想告诉我我打算做什么。

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

2 个答案:

答案 0 :(得分:8)

插件怎么样:

$.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;
        });
    });
}

调用如:

$('input').superScript();

也可能绑定到keyup等,而且很容易转换为普通的javascript而不是jQuery,但我刚刚创建它,所以如果它有效,可以根据自己的需要进行修改吗?

FIDDLE

答案 1 :(得分:2)

<input>不是容器,因此不包含任何html。

<input>的value属性必须是纯文本,所以不能不做我认为你正在尝试的事情。

然而,根据您真正需要做的事情,有一些不同的有用性的解决方法。见Superscript text in HTML <input type="submit" />

此外,您还可能会发现<div>中“可编辑”内容的使用具有价值。见https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable