当我使用 javascript 更新文本时，光标移动到文本的开头

Question

我正在使用 contenteditable 来允许用户编辑网页上的信息，但某些字段有长度要求，我希望他们知道何时达到该要求，所以我更改了文本的颜色击中时被砍掉回红。

问题是当使用 JavaScript 更改文本时，浏览器会将光标移动到字符串的前面。有谁知道我可以防止这种行为的方法？据我所知，这是所有浏览器都存在的问题。

Here's a JSFiddle.

$(element).keypress(function (event) {
    if ($(element).text().trim().length > maxChars) {
        $(element).html($(element).text().trim().substr(0, maxChars) +
            "<span class=red>" + $(element).text().trim().substr(maxChars) + "</span>");
    }
});

Answer 1

多亏了harsha 和Tim Down，我终于让它工作了，还解决了Firefox 不允许空格的问题，而且效果很好。我能找到的唯一非预期行为是它弄乱了浏览器的撤消历史记录，但除此之外它运行良好。

我已经在除 IE 之外的所有浏览器中进行了测试，但我不明白为什么它在较新的 IE 版本中也不起作用。但是它需要使用输入事件，所以它在旧浏览器中不起作用。我也不知道它如何处理换行符，因为我在我的应用程序中剥离了它们。

首先，您需要在文件中的某处使用此代码 written by Tim Down。

var saveSelection, restoreSelection;
var endSpaceIndex = -1;

if (window.getSelection && document.createRange) {
    saveSelection = function(containerEl) {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(containerEl);
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        var start = preSelectionRange.toString().length;

        return {
            start: start,
            end: start + range.toString().length
        }
    };

    restoreSelection = function(containerEl, savedSel) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if (node.nodeType == 3) {
                var nextCharIndex = charIndex + node.length;
                if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                    range.setStart(node, savedSel.start - charIndex);
                    foundStart = true;
                }
                if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                    range.setEnd(node, savedSel.end - charIndex);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (document.selection) {
    saveSelection = function(containerEl) {
        var selectedTextRange = document.selection.createRange();
        var preSelectionTextRange = document.body.createTextRange();
        preSelectionTextRange.moveToElementText(containerEl);
        preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
        var start = preSelectionTextRange.text.length;

        return {
            start: start,
            end: start + selectedTextRange.text.length
        }
    };

    restoreSelection = function(containerEl, savedSel) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(containerEl);
        textRange.collapse(true);
        textRange.moveEnd("character", savedSel.end);
        textRange.moveStart("character", savedSel.start);
        textRange.select();
    };
}

您还需要以下代码。它使用 jQuery，所以如果你没有它，你将不得不在下面的示例中摆脱 jQuery。这需要绑定input事件，因为Firefox在调用keyup和keypress时非常不一致。这就是解决 Firefox 不允许空格的问题。这很乱。但话又说回来，显然浏览器对contenteditable 的支持也是如此。

// Provided `element` is the element that you want to modify while the user changes it.
$(element).bind('input', function() {
    var savedSel = saveSelection(element);
    if (endSpaceIndex > -1 && $(element).text().substr(endSpaceIndex) != " " 
        && savedSel.end == $(element).text().length && savedSel.end == savedSel.start) {
            $(element).html($(element).text().substr(0, endSpaceIndex) + " " + $(element).text().substr(endSpaceIndex));
            endSpaceIndex = -1;
            savedSel.end = savedSel.start = $(element).text().length;
    }

    // Here, change the element however you want to. 
    // For example, I add a 'red' class around the text that will be chopped off

    restoreSelection(element, savedSel);
    var fullText = $(element).text();
    if (fullText.substr(fullText.length - 1) == " ") {
        endSpaceIndex = fullText.length - 1;
    }
}

我最初也将其标记为重复，但我不再认为它是重复的，因为它解决了 Firefox 不允许空格的问题。希望这对其他人有帮助！

Answer 2

也许我可以尝试为您指明正确的方向。

首先：获取当前光标在文本字段中的位置： Get cursor position (in characters) within a text Input field

第二：改变颜色，将光标移到开头

第三：将光标放回原处： jQuery Set Cursor Position in Text Area