Question

我正在使用contenteditable来允许用户编辑网页上的信息，但有些字段有长度要求，我希望他们知道什么时候达到了这个要求，所以我改变了文本的颜色当它们重新变成红色时被砍掉。

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

$(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

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

2 个答案: