-3

这是我的代码，可以很好地为可编辑 div 中的数字着色，但光标将移到 div 的开头，当我按下键盘箭头按钮遍历字符串时，它应该可以正常工作，当我点击“home”和“结束”按钮，光标应该按预期移动

jQuery(document).ready(function(){

       $("#richTextField").keyup(function() {

          var divContent = $(this).text();

          var pattern = /(\d)/g;

          var replaceWith = '<span class="numberClass"'+ '>$1</span>';


          var highlighted = divContent.replace(pattern,replaceWith);


          $(this).html(highlighted);

       });

    });
4

2 回答 2

0

消除您不想运行该功能的键，类似这样（即应该正常运行）

$("#richTextField").keyup(function(e) {
    var excludeKeyCodes = [8, 9, 13, 46, 35 ,36 ,37, 38, 39, 40];
    if( !$.inArray(e.which, excludeKeyCodes ))
    {
        var divContent = $(this).text();
        var pattern = /(\d)/g;
        var replaceWith = '<span class="numberClass"'+ '>$1</span>';
        var highlighted = divContent.replace(pattern,replaceWith);        
        $(this).html(highlighted);
    }
});

供参考javascript 键码

快速总结

8 - Backspace, 9 - Tab, 13 - Enter, 46 - delete, 35 - end, 36 - home, 37,38,39,40 - 箭头（左、上、右、下）

于 2012-11-23T04:36:21.733 回答
0

以下是您想要的：

jQuery(document).ready(function () {

    $("#richTextField").keyup(function () {

        var divContent = $(this).text().split('');
        var pattern = /(\d)/;
        var replaceWith = '<span class="numberClass"' + '>$1</span>';
        var highlighted = divContent.map(function (u) {
            if (pattern.test(u)) return $(u.replace(pattern, replaceWith));
            else return document.createTextNode(u);
        });

        var caretPos = getCaretCharacterOffsetWithin(this);

        $(this).empty().append(highlighted);

        setCursor(this, caretPos);
    });
});

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

function setCursor(node, pos) {
    if (!node) {
        return false;
    } else if (document.createRange) {
        range = document.createRange();
        range.selectNodeContents(node);
        range.setStart(node, pos);
        range.setEnd(node, pos);
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (node.createTextRange) {
        var textRange = node.createTextRange();
        textRange.collapse(true);
        textRange.moveEnd(pos);
        textRange.moveStart(pos);
        textRange.select();
        return true;
    } else if (node.setSelectionRange) {
        node.setSelectionRange(pos, pos);
        return true;
    }
    return false;
}

这个 JS Fiddle 提供了一个工作演示：http: //jsfiddle.net/B3PgU/

代码片段取自：

https://stackoverflow.com/a/4812022/1662998

https://stackoverflow.com/a/2920149/1662998

于 2012-11-23T05:07:44.377 回答