内容可编辑分区-在.html()之后更新光标位置

Content Editable Div - Update cursor position after .html()

本文关键字:之后 更新 位置 光标 html 编辑 分区      更新时间:2023-09-26

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

我已经有了一些工作——但一旦达到阈值,光标位置就会重置回起始位置(用户实际上是在反向输入!)。

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

有没有办法得到这个位置,并将其恢复到我更换该区域内容之前的位置,或者我的想法完全错误了?

感谢

JS Fiddle: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);

        }
    }
});

更新回答了我自己的问题-请参阅下文。

EDIT用户已在此处解决此问题:https://stackoverflow.com/users/2159246/alan0xd7

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