[英]Superscript in input field of text type
I have a HTML input field like this: 我有一个HTML输入字段,如下所示:
<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>";
How about a 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 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 ? 可能也可能绑定到keyup等,而且很容易转换为普通的javascript而不是jQuery,但我刚刚创建它,所以如果它可以工作,修改它以满足你的需求?
<input>
is not a container, and so does not 'contain' any html. <input>
不是容器,因此不包含任何html。
The value attribute of <input>
must be plain text, so no you can't do what I believe you're attempting. <input>
的value属性必须是纯文本,所以不能不做我认为你正在尝试的东西。
There are workarounds however, of varying usefulness, depending on what you really need to do. 然而,根据您真正需要做的事情,有不同的有用性的变通方法。 See Superscript text in HTML <input type="submit" />
请参阅HTML <input type =“submit”/>中的上标文本
Further, you might also find the use of 'editable' content in a <div>
to be of value. 此外,您可能还会发现在
<div>
使用“可编辑”内容是有价值的。 See https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable 请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.