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

Question

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

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

插入符号位于我添加的复选框之前，即使我按下右箭头键也无法正确显示。有人建议让它更正确吗？ （我正在使用基于webkit的webbrowser，只是让它正确就好了。）

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

这是一个历史悠久的铬病毒。

经过越来越多（重新）搜索，它是一个网络浏览器错误：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