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

发布于 2024-12-05 06:26:27 字数 782 浏览 3 评论 0原文

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

原文

I'm having a problem in Firefox (other browsers seem to work fine) with dynamically generated elements containing a contenteditable="true" attribute:

If I selectAll (either dynamically, or with my mouse), Firefox won't allow keyboard input.

Please see my jsFiddle Example for reference. This appears to only affect 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>');
});

EDIT:
Here is the actual app I'm working on (pardon the dust): cr8.me/app/ff.html - What I'm wanting is to click (double-click to select all text) a Note, Category, or Plan Title to edit it. Does it work for anyone? Maybe it's just my configuration - or poor scripting. Lines 137, 572 are relevant.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

故事还在继续 2024-12-12 06:26:27

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

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

你的应用程序也是如此 - 当我用 div 替换所有可内容编辑的范围时，编辑在 Firefox 3.6 和 Firefox 6.0 中工作得很好。

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

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