7

我在 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 行是相关的。

4

1 回答 1

7

显然 Firefox 在span元素上存在 contenteditable 问题（我假设其他display: inline元素也是如此，尽管我没有测试过）。只需将 span 替换为 divs即可解决问题。更重要的是 - div 可以使用 css 在它们上设置“显示：内联”属性并且仍然可以正常工作。

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

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

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

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

于 2011-09-23T09:42:20.860 回答