content可编辑+全部选择：Firefox不允许在动态生成的内容上进行键盘输入

Question

我在Firefox中遇到了一个包含contenteditable="true"属性的动态生成元素的问题(其他浏览器似乎工作得很好):

如果我输入selectAll(无论是动态的，还是用鼠标)，Firefox将不允许键盘输入。

请参考我的jsFiddle示例。这似乎只影响Firefox。

$(document).ready(function(){
$('.edit').live('dblclick', function () {
    document.execCommand('selectAll',false,null);
});
$('#live').append('<p class="edit" contenteditable="true">This content is generated. Firefox will not allow keyboard input when "ALL" is selected.</p>');
});

编辑:这是我正在开发的实际应用程序(请原谅灰尘):cr8.me/app/ff.html -我想要的是点击(双击选择所有文本)注释，类别或计划标题来编辑它。它对任何人都有效吗?也许这只是我的配置——或者糟糕的脚本。第137、572行是相关的

Answer 1

显然Firefox在span元素上存在contentitable问题(我假设其他display: inline元素也是如此，尽管我没有测试过)。只需用div 替换span就可以解决这个问题。更重要的是，div可以使用css设置"display: inline"属性，并且仍然可以正常工作。

在这里查看工作示例:http://jsfiddle.net/6sTJh/5/。带有标签"Add buggy"的按钮动态地添加了一个带有contenteditable属性的span，但它没有像预期的那样工作，而按钮"Add working"追加了一个带有contenteditable属性的div，它工作得很好。

你的应用程序也是如此-当我用div替换了所有的contentitable span时，编辑在firefox 3.6和firefox 6.0中工作得很好。

注:至于你的应用程序代码——不要在多个节点上使用相同的id(就像你在每个笔记上使用相同的id"note-title"一样)，否则你会从不同的浏览器得到意想不到的行为。

一般规则是在一个页面上只能有一个给定id的元素。使用类将多个元素"分组"，并在以后选择它们。