jquery - 何が問題なのですか: jQuery で innerHtml を介してキーを押している間、em または任意のタグを一度挿入できません

Question

em大きな問題が 1 つあります。しばらくしてからタグを追加したいのですが、これkeyupは jQuery のイベントで発生します。したがって、emタグを追加し、その中に残りのテキストまたは文字を追加します。これは私のコードです:

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

Answer 1

このコードは、はみ出した文字を赤くします。これはdiv内のタグをtext()無視するため、使用します。em

$(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 の誰かです:カーソル位置を contentEditable <div> に設定します。

Answer 2

.html()代わりにオフにしinnerHTMLてから追加してみてください。