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

Question

I've tried to make a simple editor box and want to add the checkbox input onto it.

But when I add the checkbox, I found that the cursor didn't go right:

the caret is before the checkbox I added, and it can't go right even I hit my right arrow key. Any suggest to make it more correct? (I'm using a webbrowser based on webkit, just make it correct is fine. )

What I want to implement is when I click the mouse or use keyboard to position the content, the caret should work as normal editor(word, evernote, etc).

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

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

Hit backspace one by one, wired things happens:

Answer 1

It is a long history bug of chromium.

After more and more (re)search, it is a web browser Bug: chromium bug: Caret moves incorrectly around check boxes and radio buttons in contentEditable div

What is the expected result?

Using the arrow keys to place the caret immediately after a check box or radio button should result in the caret being rendered in that spot.

What happens instead?

The caret is rendered to the left of and slightly down from the radio button or check box.

Seems chrome has postponed the issuefix

The solution I finally got:

I use a <img> tag instead of real <input> tag, use checkbox_check checkbox_uncheck class to toggle the image check or uncheck.

It works fine, I also tried to write the function for setting/getting content from the editor view, and use regex::replace for transforming between <input> and <img>

Answer 2

I have Added some javascript code and now it's work as expected:

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