我有一个带有contentEditable ="true"的div.并需要为输入的数字涂色 [英] I have a div with contentEditable="true" and need to color the numbers entered

问题描述

这是我的代码，可很好地为可编辑div中的数字着色，但光标将移至div的开头，当我按键盘上的箭头按钮来遍历字符串时，也应该正常工作，当我单击"home"时"和结束"按钮，光标应按预期进行

Here is my code that works well for coloring the numbers in editable div but the cursor is going to the start of the div and it should work normal when I press keyboard arrow buttons to traverse the string, also when i click "home" and "end" buttons, cursor should go as expected

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);

       });

    });

推荐答案

以下内容可满足您的需求:

The following does what you want:

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小提琴提供了一个有效的演示: http://jsfiddle.net/B3PgU/

A working demo is available at this JS Fiddle: http://jsfiddle.net/B3PgU/

代码片段来自:

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

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

这篇关于我有一个带有contentEditable ="true"的div.并需要为输入的数字涂色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！