Странное поведение в HTML5 contenteditable

Question

У меня есть промежуток, который находится внутри элемента списка.

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

На этом промежутке я превращаю его в контент, когда вы дважды щелкаете по нему.

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

По какой-то причине, фокус не работает, как и должно быть: вы не видите курсор мигает, но если вы начинаете набирать пишет на пролете, добавляя текст перед ним, что это остальная часть содержимого li.

Confusing? здесь он находится в fiddle (Chrome)

Если вы изменили мероприятие на «щелчок», все будет работать так, как ожидалось.

Это ошибка? Это происходит только в Chrome, Firefox кажется прекрасным. Кто-нибудь уже испытал это?

UPDATE: вот video этого происходит

Answer 1

вы shouldto сделать это на DIV не пяди увидеть коррекцию здесь: ЯШ:

$('.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> 

видеть его живым http://jsfiddle.net/rB8Gs/3/