当按右箭头键时光标消失。

Question

内容可编辑div具有html元素，如span和简单文本。

琴杆

​

.ing-tag_0{
color:white;
background-color: blue;
}

<div value="" id="step_input_0" name="step" placeholder="Tell us about step 1" class="input stepbox step_input" contenteditable="true">sdf dsaf asdf s <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span></div>

​

将光标移动到div的末尾。在点击左箭头键后，光标连续地在跨度之间移动，.This工作得很好。

现在，将光标移动到div的开头，然后通过不断地单击右箭头键，尝试移动到div的右侧，然后光标在遇到跨时的某个点消失。

我在这里搞错了。

请建议一种方法，所以如果我按右箭头，光标移动到结束通过div。？

跨度不能是内容可编辑的，因为这些内容是固定的.

编辑

我没有任何其他选择来改变这一点。我已经试过添加零宽度的空格了。

1. 这不适用于狩猎旅行。
2. 如果用户删除了这个空格。光标也会再次消失。

Answer 1

下面是一个可行的解决方案：

$('.editable').on('keydown', function(event) {
    if (window.getSelection && event.which === 39) {
        var sel = window.getSelection();
        var nodes = sel.anchorNode.childNodes;
        var selection = sel.anchorOffset;
        var loops = 0;
        var i = selection;
        if (nodes.length > 0 || (nodes.length === 0 && sel.anchorNode.length === 
        selection && sel.anchorNode.nextSibling !== null)) {
            var r = document.createRange();
            if (nodes.length === 0 && sel.anchorNode.length === selection && 
            sel.anchorNode.nextSibling !== null) {
                r.setStartBefore(sel.anchorNode.nextSibling);
                r.setEndAfter(sel.anchorNode.nextSibling);
            } else {
                while (i < nodes.length) {
                    loops += 1;
                    if (nodes[i].nodeType !== 3) {
                        break;
                    }
                    i++;
                }
                r.setEnd(this, selection + loops);
                r.setStart(this, selection);
            }
            sel.removeAllRanges();
            sel.addRange(r);
            $(this).focus();
        }
    }
});

包含backspace事件的示例

Answer 2

只需在每个<span>之间添加空格。最后，在div内部放置一个零宽度空间(​)。希望这解决了您的问题！

​

.ing-tag_0{
color: white;
background-color: cyan;
}

<div value="" id="step_input_0" name="step" placeholder="Tell us about step 1" class="input stepbox step_input" contenteditable="true">sdf dsaf asdf s <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span>&#8203;</div>

​