如何将光标移动到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是更新后的提琴。