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

我使用contenteditable允许用户编辑网页上的信息，但有些字段有长度要求，我想让他们知道何时达到该要求，因此我将文本的颜色更改为红色，当他们点击return（返回）时，文本将被截断

问题在于，当使用JavaScript更改文本时，浏览器会将光标移动到字符串的前面。有人知道我能阻止这种行为的方法吗？据我所知，这在所有浏览器中都是一个问题

$（元素）。按键（功能（事件）{
if（$（元素）.text（）.trim（）.length>maxChars）{
$（元素）.html（$（元素）.text（）.trim（）.substr（0，maxChars）+
“+$（元素）.text（）.trim（）.substr（maxChars）+”）；
}
});

也许我可以试着给你指出正确的方向

首先：在文本字段中获取当前光标位置：

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

第三：将光标放回原来的位置：

---

多亏了harsha和Tim Down，我终于实现了这一点，并且修复了Firefox不允许使用空格的问题，而且效果非常好。我能找到的唯一一个非预期的行为是，它弄乱了浏览器的撤消历史记录，但除此之外，它工作得非常好

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

首先，您需要在文件中的某个位置使用此代码

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

---

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

也许这会有帮助哇，显然我并不像我想的那样善于寻找答案。谢谢没问题，我很高兴这有帮助！将更一般地工作，因此插入符号保持在相同的位置，而不是总是在末尾（如果您在中间的某个位置输入文本，这不是您想要的）。Demo:@TimDown这就是我在过去一天里一直想让它做的，谢谢！由于某种原因，在JSFiddle，这对我来说是行不通的（在文字作品中间打字，但最后打字会使光标跳转到OFF），但在我的实际应用程序中，效果很好。Firefox仍然存在一个问题，尽管从末尾删除了空格。。。我稍后会查看它，看看有什么问题。问题是关于

contenteditable

元素，而不是输入或文本区域。此任务的代码太多了：(

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

// 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;
    }
}