Javascript使用箭头键移动整个范围

Question

我试图移动span由一个位置标记及其内容向左或向右，当光标是他们的内部，按下Ctrl键向右或向左控制。 span标签在可编辑contenteditable段落内。 我什至没有运气得到测试消息登录到控制台，以指示光标甚至在span标记内。 这是小提琴：

https://jsfiddle.net/scooke/5tp5oe7z/

Javascript / jQuery

$(document).on('keyup','.move',function(e){ 
  if (e.ctrlKey && (e.which === 37 || e.which === 39)){
    //move character at right or left of span to the other side
    //to simulate the whole span moved  
  }    
  e.stopPropagation();   
 });

样本HTML

<p class="parent" contenteditable="true">Bacon ipsum dolor amet jowl chicken    pork loin <span class="move">[move text]</span>tail. Short ribs meatball
<br>bresaola beef boudin hamburger, cow rump swine. Pork belly ribeye leberkas venison
<br>ground <span class="move">[move text]</span>round</p>

Answer 1

1. 您的代码失败，因为（不幸地） span元素不会触发keydown / keyup / keypress事件-不，即使它们是contenteditable一部分也不会。

   因此，您需要在contenteditable元素本身上捕获事件。

2. 在jQuery中处理TextNode就像在本机JS中一样复杂（或更复杂）

   标准Node类的相关属性和方法：

   • Node.prototype.data （文本）节点的内容
   • Node.prototype.length内容的长度
   • Text.prototype.insertContent(position, content) -插入文本
   • Text.prototype.appendConent(content) -追加文本
   • Text.prototype.deleteContent(position, length) -删除部分内容

话虽如此，这应该提供您期望的Ctrl +向左/向右移动： （JSFiddle）

$('p[contenteditable]').on('keydown', function (e) { 
    // Only handle event if ctrl+left / ctrl+right
    if (!e.ctrlKey || (e.which != 37 && e.which != 39)) return;
    // and selection is in a span.move
    var sel = document.getSelection();
    var node = sel.anchorNode;
    if (!node || node != sel.focusNode) return;
    // Text "[move text]" is in selection, get <span> parent
    if (node.nodeType == Node.TEXT_NODE) {
        node = node.parentNode;
    }
    if (!node || node.nodeName != 'SPAN' || node.className != 'move') return;

    // Do the magic
    moveSpan(node, e.which == 37); // 37: left, 39: right
    e.preventDefault();
    e.stopPropagation();
});

function moveSpan (span, toLeft) {
    var left = span.previousSibling;
    var right = span.nextSibling;

    if (!left || left.nodeType != Node.TEXT_NODE || !right || right.nodeType != Node.TEXT_NODE) return;
    if (toLeft && !left.length) return;
    if (!toLeft && !right.length) return;

    if (toLeft) {
        right.insertData(0, left.data[left.length - 1]);
        left.deleteData(left.length - 1, 1);
    } else {
        left.appendData(right.data[0]);
        right.deleteData(0, 1);
    }
}

---

注意：仅适用于IE9 +，而IE8-上的选择API是非标准的。