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 元素上存在问题（我假设其他 display：inline 元素就是这种情况，尽管我没有测试过它）。只需用div替换范围即可解决问题。更重要的是 - div可以使用css设置“display：inline”属性并且仍能正常工作。

点击此处查看工作示例：http://jsfiddle.net/6sTJh/5/。标签为“添加错误”的按钮会动态添加一个具有contenteditable的范围，并且它不能按预期工作，而按钮“添加工作”会添加具有contenteditable属性的div，并且它的工作正常。

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

旁注： 至于你的应用程序代码 - 不要在多个节点上使用相同的 id （就像你在每个音符上使用相同的id“note-title”）或者你可以从各种节目中获得意想不到的行为浏览器。

Generale规则是您在一个页面上只能有一个具有给定ID的元素。使用 class “分组”多个元素，稍后再选择它们。

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

1 个答案: