使用 contenteditable div 修正光标位置

Question

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

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

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

我想要实现的是当我单击鼠标或使用键盘定位内容时，插入符号应该像普通编辑器（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

这是铬的一个历史悠久的错误。

经过越来越多（重新）搜索，是网页浏览器Bug：chromium bug: Caret moves incorrectly around check boxes and radio buttons in 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