Question

内容可编辑的div具有跨栏和简单文本等html元素。

＆＃13;

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

＆＃13;

<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>

＆＃13;

将光标移动到div的末尾。在从光标末端连续点击左箭头键的情况下，不断地在跨距之间移动。这很好。

现在将光标移动到div的开头，然后尝试通过连续按下右箭头键移动到div的右侧，然后光标在遇到跨距时在某个点消失。

我在这里错了。

请建议一种方法，如果我按向右箭头，光标会通过div传递到最后。？

该范围不得内容可修改，因为这些内容已修复。

修改

我没有任何其他选择来改变它。我已经尝试添加零宽度的空格。

这对safari不起作用。
如果用户删除此空格，该怎么办？光标也会消失。

Answer 1

只需在每个<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>

Answer 2

这是一个可行的解决方案：

$('.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();
        }
    }
});

Example including backspace event

按右箭头键时光标消失

2 个答案: