contentEditable + selectAll：Firefox 不允许在动态生成的内容上进行键盘输入

Question

我在 Firefox 中遇到问题（其他浏览器似乎工作正常），动态生成的元素包含 contenteditable="true" 属性：

如果我selectAll（动态或使用鼠标），Firefox 将不允许键盘输入。

请参阅我的jsFiddle Example 以供参考。这似乎只影响 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 元素上存在 contenteditable 问题（我假设其他 display: inline 元素也是如此，尽管我没有测试过）。 只需用 div 替换 span 即可解决问题。更重要的是 - div 可以使用 css 在它们上设置“显示：内联”属性并且仍然可以正常工作。

在此处查看工作示例：http://jsfiddle.net/6sTJh/5/。 带有标签“Add buggy”的按钮动态添加了一个带有 contenteditable 的跨度，但它没有按预期工作，而“Add working”按钮附加了带有 contenteditable 属性的 div，它工作得很好。

您的应用也是如此 - 当我用 div 替换所有 contenteditable 跨度时，编辑在 firefox 3.6 和 firefox 6.0 中运行良好。

旁注： 至于您的应用程序代码 - 不要在多个节点上使用相同的 id （就像您在每个笔记上使用相同的 id "note-title"），否则您可能会从各种浏览器。

一般规则是在一页上只能有一个具有给定 id 的元素。使用 class 将多个元素“分组”并稍后选择它们。