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

Question

我试图制作一个简单的编辑器框，并想在其上添加复选框输入。

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

插入符号位于我添加的复选框之前，即使我按了向右箭头键也无法正确插入。 有什么建议可以使其更正确吗？ （我正在使用基于webkit的Web浏览器，只需使其正确就可以了。）

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

jsfiddler： http : //jsfiddle.net/cppgohan/84CTE/9/

HTML：

<button id="add"> AddCheckbox </button>
<button id="add2"> AddCheckbox2 </button>
<div id="editor" contenteditable="true" width="500px" height="500">
    1. Make it work <input type="checkbox"><br>
    2. Make it done <input type="checkbox" checked>
<div>

JS代码：

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

一键击退空格，发生以下情况：

Answer 1

这是铬的悠久历史。

经过越来越多的（重新）搜索，它是一个网络浏览器错误： chrome错误：插入符在contentEditable div中的复选框和单选按钮周围错误地移动

预期的结果是什么？

使用箭头键将插入符号立即置于复选框或单选按钮之后，应导致在该位置渲染插入符号。

会发生什么呢？

插入标记显示在单选按钮或复选框的左侧，并稍稍向下。

chrome似乎已推迟了问题修复

我终于得到的解决方案：

我使用的是<img>标记而不是实际的<input>标记，请使用checkbox_check checkbox_uncheck类切换图像的选中或取消选中状态。

它工作正常，我还尝试编写用于从编辑器视图设置/获取内容的功能，并使用regex::replace在<input>和<img>之间进行转换

Answer 2

我已经添加了一些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();
        }
    }

的jsfiddle