内容可编辑 div - 在 .html() 之后更新光标位置 [重复]答案

【问题标题】：Content Editable Div - Update cursor position after .html() [duplicate]内容可编辑 div - 在 .html() 之后更新光标位置 [重复]
【发布时间】：2015-07-01 14:36:10
【问题描述】：

使用 contenteditable div，我想突出显示符合特定条件的单词。其中之一是用户输入的内容是否已达到该区域允许的最大长度。

我有一些工作 - 但是一旦达到阈值，光标位置就会重置回开头（并且用户实际上是在反向输入！）。

我需要这个才能在 IE8+ 中工作。

有什么方法可以获取位置并将其设置回我替换区域内容之前的位置，还是我的思路完全错误？

谢谢

JS 小提琴： http://jsfiddle.net/vfgLjf0c/

$(document).on("keypress", "div#editableContent", function(e) {

    var element = $(this);

    // KEYUP
    if (e.type == "keypress") {
        var curLen  = element.text().length;
        var maxLen  = element.attr("data-maxlength");
        if (curLen > maxLen) {

            var overHang    = element.text().substr(maxLen);
                overHang    = "<em style='background: #fcc;'>" + overHang + "</em>";
            var newString   = element.text().substr(0, maxLen) + overHang;
            $(this).html(newString);


        }
    }

});

更新回答了我自己的问题 - 见下文。

【问题讨论】：

标签： javascript jquery html contenteditable

【解决方案1】：

编辑此问题已由用户在此处解决：https://stackoverflow.com/users/2159246/alan0xd7

解决方案：https://stackoverflow.com/a/31498234/1266457

【讨论】：