3

我有一个这样的 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>";
4

2 回答 2

9

插件怎么样：

$.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，但我刚刚做到了，所以如果它有效，修改它以满足您的需要？

小提琴

于 2013-07-16T18:21:29.467 回答
3

<input>不是容器，因此不“包含”任何 html。

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

但是，有一些变通方法，其用途各不相同，具体取决于您真正需要做什么。请参阅HTML <input type="submit" /> 中的上标文本

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

于 2013-07-16T17:59:53.450 回答