-3

これは、編集可能な div の数字を色付けするのにうまく機能するコードですが、カーソルは div の先頭に移動し、キーボードの矢印ボタンを押して文字列をトラバースすると正常に動作するはずです。また、「ホーム」と「終了」ボタン、カーソルは期待どおりに移動する必要があります

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

以下はあなたが望むことをします：

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 に答える
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 - バックスペース、9 - タブ、13 - Enter、46 - 削除、35 - 終了、36 - ホーム、37,38,39,40 - 矢印 (左、上、右、下)

于 2012-11-23T04:36:21.733 に答える