javascript - contentEditable + selectAll : Firefox won't allow keyboard input on dynamically generated content

Question

我在使用包含 contenteditable="true" 属性的动态生成元素的 Firefox 中遇到问题(其他浏览器似乎工作正常):

如果我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 的 span，但它没有按预期工作，而按钮“Add working”附加了带有 contenteditable 属性的 div，它工作得很好。

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

旁注:至于您的应用程序代码 - 不要在多个节点上使用相同的 id(就像您在每个音符上使用相同的 id“note-title”一样)，否则您可能会从各种浏览器。

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