Strange behaviour in HTML5 contenteditable

I have a span that is inside a list-item.

<ul>
    <li>text part 1
        <span class="note">this is a note</span> 
        text part 2
    </li>
    <li>text part 3</li>
</ul>

On that span, i turn it to contenteditable when you double click it.

$('span').on('dblclick', function(ev){
    ev.preventDefault();
    $(this).attr('contenteditable', 'true');
    this.focus();
});

For some reason, the focus doesn't work as it should: you don't see the cursor blinking, but if you start typing it writes on the span, adding the some text in front of it that is the rest of the li content.

Confusing? here it is in a fiddle (Chrome)

If you change the event to 'click', everything works as expected.

Is this a bug? It only happens in Chrome, Firefox seems fine. Has anyone experienced this already?

UPDATE: here's a video of it happening

Answers


you shouldto do that on div not a span see the correction here : js :

$('.note').on('dblclick', function(ev){
    $(this).attr('contenteditable', 'true');
});

html :

ul>
    <li>sdfjdslfjdlkfjsdlkjdsfl sdfh
        <div class="note">this is a note</div> 
        j fhdsf kfh.
    </li>
    <li>sdfjdslfjdlkfjsdlkjdsfl sdfh j fhdsf kfh.</li>
</ul>

see it alive http://jsfiddle.net/rB8Gs/3/


Need Your Help

using the result of subquery in mysql

mysql subquery

how can i use the result of a subquery inside its parent query?

awk return another line when a specific line is equal to something

bash awk

I'm trying to get the UUID of one of my HW USB license key.