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

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

如果我选择所有(动态或用我的鼠标),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行是相关的.

解决方法

显然Firefox在span元素上存在问题(我假设其他显示的情况就是这样：内联元素,虽然我没有测试过它).
只需用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“分组”多个元素,稍后再选择它们.

原文地址：https://www.jb51.cc/js/157446.html