jquery - 使用 jQuery 在用户键入时为数字动态添加下标

Question

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

Answer 1

Answer 2

Update 2: The below suggestion doesn't seem to work in Chrome or Safari :( I originally tested it on Firefox. Anyway, it might be a useful starting point.

---

Update: As Dr.Molle pointed out, you cannot decorate the content of a regular <textarea> with HTML markup. That said, you might look into using some sort of WYSIWIG library to achieve what you're after. For example, I was able to get a rough draft of the behavior you seem to want using TinyMCE. Take a look at this jsFiddle demo to see how it works.

---

Original answer: Here's a sort of hacky approach that you might be able to run with:

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