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();
});

出于某种原因，焦点不能正常工作：你没有看到光标闪烁，但是如果你开始输入它就会在跨度上写入，在它前面添加一些文本，这是剩下的李的内容。

混淆？这是fiddle（Chrome）

如果您将事件更改为“点击”，则一切都按预期工作。

这是一个错误吗？它只发生在Chrome中，Firefox看起来很好。有没有人经历过这个？

更新：这里发生了video

Answer 1

你应该在div而不是跨度上看到这里的修正： 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>

看到它活着 http://jsfiddle.net/rB8Gs/3/

HTML5中的奇怪行为令人满意

1 个答案: