如何在 IE 8 中通过 Jquery 在输入文本框中设置 html 标签？答案

【问题标题】：How to set html tags inside the input text box by Jquery in IE 8?如何在 IE 8 中通过 Jquery 在输入文本框中设置 html 标签？
【发布时间】：2023-04-08 00:13:01
【问题描述】：

jquery + html

html = "<i class='icon-rupee'></i>"
$("#amount").val(html + 500 + html + 300); //Wrong (because string is coming, output should show html_safe)

输出即将到来：具有值的输入字段：<i class='icon-rupee'></i>500<i class='icon-rupee'></i>300

想要的输出：输入字段值：₹500 ₹300

如何在输入文本字段中设置 html 代码。任何解决方案/帮助

【问题讨论】：

您可以简单地使用输入框外的图标。因此，您不会对图标执行任何操作。由于它仅用于显示目的，请在文本字段之外使用它。
@karan3112 其实我需要在输入框内显示两个图标...不只是一个...
@haim770 如何在输入文本字段上使用 .html()。
@user3676578，我错了，没注意到是input。
用它作为符号怎么样 - ₹ ？

标签： jquery

【解决方案1】：

实际上不可能将内联元素内的 HTML 元素作为输入进行操作。

一种可能的方法是使用 contenteditable 块：创建一个假输入，在其中显示您想要的任何内容，在其上绑定一些键盘事件并使用假输入的值更改您的真实输入...

我认为这绝对不是 HTML5 的好习惯，但它似乎工作：

http://jsfiddle.net/6eHvB/2/

HTML

<input type='text' readonly name='amount' id='amount' value='500 300' />
<div id='fake-amount' contenteditable></div>

var html = " <i class='fa fa-rupee'></i> ";
$("#fake-amount").html(html + 500 + html + 300).focus().on('keyup', function (event) {
    $('#amount').val($(this).text());
});

兼容 IE6+： http://caniuse.com/contenteditable

【讨论】：