當我使用javascript更新文本時，光標移動到文本的開始位置

我使用contenteditable來允許用戶編輯網頁上的信息，但某些字段有長度要求，我希望他們知道他們什麼時候碰到的要求，所以我改變了文字的顏色，當它們回到紅色時它們會被切掉。當我使用javascript更新文本時，光標移動到文本的開始位置

問題是，當使用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>"); 
    } 
});

來源

2013-12-23 Josh Sherick

也許這將幫助 http://stackoverflow.com/questions/16230720/set-the-caret-position-always-to-end-in-contenteditable-div –

哇，顯然我不是那麼好按照我的想法尋找答案。謝謝！ –

沒有問題，我很高興它幫助！ –

感謝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不容許空間這個問題。希望這可以幫助別人！

來源

2013-12-25 08:23:09