如何將光標移動到ContentEditable Span的開始/結尾

Question

我已經看到了類似這樣的其他問題，但它有點不清楚正確的做法是什麼。我的假設是將光標移動到ContentEditable的前面，您只需將焦點放在元素上。將光標移到後面需要某種polyfil解決方案。

小提琴：http://jsfiddle.net/ys04jkth/

在我的小提琴預期功能是將整個文本框光標包含「令牌」（格）在它的中間。當焦點集中在令牌上時，用戶可以將其刪除，或者使用箭頭鍵繼續向左或向右移動。關於如何移動到ContentEditable結尾的其他問題的常見解決方案是以下功能，當用戶將注意力集中在令牌上時單擊左箭頭鍵可以使用下面的功能：

function placeCaretAtEnd(el) { 
    el.focus(); 
    if (typeof window.getSelection != "undefined" 
    && typeof document.createRange != "undefined") { 
    var range = document.createRange(); 
    range.selectNodeContents(el); 
    range.collapse(false); 
    var sel = window.getSelection(); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } else if (typeof document.body.createTextRange != "undefined") { 
     var textRange = document.body.createTextRange(); 
     textRange.moveToElementText(el); 
     textRange.collapse(false); 
     textRange.select(); 
    } 
} 

當用戶將注意力集中在令牌上並且他們按下了右箭頭鍵時，我試着將焦點放在下一個跨度上，假定它將光標聚焦在前面。我看到奇怪的行爲，在這兩種情況下，第一個字母被跳過。深入瞭解爲什麼會發生這種情況？

謝謝。

Answer 1

在你的keydown函數中，當你到達它的結尾（或開始）時，你改變你的下一個（或前一個）元素的事件目標。

更改目標後發生了什麼？ keydown默認行爲。因此，如果您輸入的是正確的箭頭，則會達到最終結果，您將更改目標...並且由於這是默認行爲，因此您的光標向右移動。

解決方案是什麼？您可以使用return false來防止默認行爲。所以，在你的keydown事件右箭頭代碼將是這樣的：

 if (event.keyCode == 39) { //Right arrow 
      var nextSpan = selectedToken.next(); 
      if (nextSpan.length) { 
       nextSpan.focus(); 
       selectedToken.removeClass('selectedToken'); 
      } 
     return false; 
     } 

Here是更新後的提琴。