Question

当用户键入文本框时，是否可以向数字添加下标标签，例如，如果用户输入H20，它将立即转换为H ₂ 0。我正在寻找使用jQuery的解决方案？

Answer 1

不，文本框可能不包含html标记。但您可以使用下标2字符₂（Unicode 2082）替换2。

这里的功能：

function fx(e)
{
  var k=String.fromCharCode(e.which);

  if(k.match(/\d/))
  {
    var r=String.fromCharCode(8320+Number(k));
    try{//IE
          document.selection.createRange().text=r;
         }
      catch(x)
      {//others
        var o         = e.target
        var intStart  = o.selectionStart;
        var intEnd    = o.selectionEnd;
        o.value = (o.value).substring(0, intStart) + r + 
                  (o.value).substring(intEnd, o.value.length);
                    o.selectionStart=o.selectionEnd=intStart+r.length;
                    o.focus();
      }  
      return false;
  }
  return true;
}

在onkeypress上调用此函数。

它替换（如果输入数字）当前选择与该数字的下标位置8320（HEX 2080）的Unicode-char是下标零，它只是将键入的数字添加到该位置并检索新位置的char。

演示：http://jsfiddle.net/doktormolle/KDgH9/

Answer 2

更新2 ：以下建议似乎无法在Chrome或Safari中使用:(我最初在Firefox上测试过它。无论如何，它可能是一个有用的起点。

更新：作为Dr.Molle pointed out，您无法使用HTML标记修饰常规<textarea>的内容。也就是说，您可能会考虑使用某种WYSIWIG库来实现您所追求的目标。例如，我能够使用TinyMCE得到您似乎想要的行为草稿。看看this jsFiddle demo，看看它是如何运作的。

原始回答：Here's a sort of hacky approach您可能可以使用：

$("#text-input").keypress(function() {
    var text = $(this).val();
    $("#output").html( text.replace(/(\d+)/g, "<sub>$1</sub>") );
});

使用jQuery作为用户类型动态添加下标到数字

2 个答案: