jquery - 出了什么问题：在通过 jQuery 中的 innerHtml 进行 keyup 时，无法插入 em 或任何标签

Question

我有一个大问题，我想em在一段时间后添加标签，这发生keyup在 jQuery 中的事件上。所以我想添加em标签，并在其中附加其余的文本或字符。这是我的代码：

$(this).text.innerHtml("<em></em>").append($(this).text);

Answer 1

尝试使用.html()而不是关闭innerHTML然后附加。

Answer 2

此代码将使溢出的字符变为红色。我使用text()，因为这忽略em了 div 中的标签。

$(function () {
    $('div').keyup(function () {
        var $this = $(this),
            text = $this.text(),
            maxlength = 20;

        if (text.length > maxlength) {
            var first = text.substring(0, maxlength),
                overflow = text.substring(maxlength, text.length);

            // this.innerHTML = first + '<em>' + overflow + '</em>';
            $this.text(first);

            // Now all there's left to do is force the caret at the end,
            // but that's pretty much code and would make this messy.
            // I'm sure you can google this. There's a link in my answer.
        }
    });
});

有了这个 HTML

<div contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" id="342387257900146688">
    Type here.
</div>

这是一个现场小提琴：http: //jsfiddle.net/BaN7D/1/

但是，如果超过最大长度，.html()将强制光标在开头。有一些示例可以将光标放在 div 的末尾。这里有人在 SO 上提出了一个很好的答案：Set cursor position on contentEditable <div>