文本類型的輸入字段中的上標

Question

我有一個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>";

Answer 1

插件怎么樣：

$.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，但我剛剛創建它，所以如果它可以工作，修改它以滿足你的需求？

小提琴

Answer 2

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

<input>的value屬性必須是純文本，所以不能不做我認為你正在嘗試的東西。

然而，根據您真正需要做的事情，有不同的有用性的變通方法。 請參閱HTML <input type =“submit”/>中的上標文本

此外，您可能還會發現在<div>使用“可編輯”內容是有價值的。 請參閱https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable