Javascript 使用contenteditable div修复光标位置是否正确

我试图制作一个简单的编辑器框，并希望将复选框输入添加到其中

但当我添加复选框时，我发现光标没有正确移动：

插入符号在我添加的复选框之前，即使我按了向右箭头键，它也不能向右移动。有什么建议可以让它更正确吗？（我使用的是基于webkit的webbrowser，只需将其更正即可。）

我想实现的是当我单击鼠标或使用键盘定位内容时，插入符号应该像普通编辑器（word、evernote等）一样工作。

jsfiddler：

HTML:

AddCheckbox
添加复选框2
1.让它工作起来

2.完成

JS代码：

$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
$editor=$（“#editor”）；
$editor.append（“”）；
$editor.focus（）；
});
...
});

一个接一个地点击backspace，有线的事情就会发生：

---

我添加了一些javascript代码，现在它可以正常工作了：

function setEndOfContenteditable(contentEditableElement)
    {
        var range,selection;
        if(document.createRange)
        {
            range = document.createRange();
            range.selectNodeContents(contentEditableElement);
            range.collapse(false);
            selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
        }
        else if(document.selection)
        { 
            range = document.body.createTextRange();
            range.moveToElementText(contentEditableElement);
            range.collapse(false);
            range.select();
        }
    }

---

铬是一种历史悠久的细菌

经过越来越多的（重新）搜索，这是一个web浏览器错误：

预期的结果是什么？ 使用箭头键将插入符号放在复选框或 单选按钮应导致插入符号在该点呈现

会发生什么？ 插入符号呈现在收音机的左侧，稍微向下 按钮或复选框

似乎chrome已经推迟了发行

我最终得到的解决方案是： 我使用一个

标记而不是真正的

标记，使用

复选框

复选框

类来切换图像检查或取消选中

---

它工作得很好，我还尝试编写了从编辑器视图设置/获取内容的函数，并使用

regex:：replace

在

和

之间进行转换，但这并没有多大帮助。@Gohan它实现了您想要的功能。那么问题出在哪里呢？我知道如何移动插入符号，我想实现的是当我点击鼠标或使用键盘定位内容时，插入符号应该像普通编辑器一样工作（word、evernote等）。@Gohan我没有得到它。您希望在插入复选框后在末尾移动插入符号，这很好。插入符号有什么不寻常之处？它的工作，因为它应该！若你们不在输入标记后添加空符号，那个么就并没有办法在复选框后移动插入符号！也许你没有使用chrome，问题似乎只是webkit而已

$(document).ready(function(){
    $("#add").click(function(){
        $editor = $("#editor");
        $editor.append('<input type="checkbox">');
        $editor.focus();
    });
    ...
});

function setEndOfContenteditable(contentEditableElement)
    {
        var range,selection;
        if(document.createRange)
        {
            range = document.createRange();
            range.selectNodeContents(contentEditableElement);
            range.collapse(false);
            selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
        }
        else if(document.selection)
        { 
            range = document.body.createTextRange();
            range.moveToElementText(contentEditableElement);
            range.collapse(false);
            range.select();
        }
    }