logo标签列表

Firefox内容可编辑div焦点问题

htmlcssfirefoxfocuscontenteditable
6

我在我的网站上使用了 contentEditable 的 div 标签，但是在使用 Firefox 浏览器时发现了一个奇怪的问题。

以下是示例源代码：

<html>
  <head>
  </head>
  <body>
    <div contentEditable="true" style="margin-left:auto; 
         margin-right:auto; height:200px; width:200px; border-style:solid; 
         border-color:black; border-width:1px;"></div>
  </body>
</html>

以下是重现步骤：
  1. contentEditable 获得焦点并且光标在 div 中闪烁，但是 div 中没有任何文本。
  2. 用户单击 contentEditable div。
  3. div 仍然显示焦点，但是现在没有闪烁的光标，用户无法在 div 中输入内容。
我已经在 Ubuntu 上使用 Firefox 3.6.3 和 Windows XP 上的 Firefox 3.5 复现了此错误。在 Chrome 中不会发生这种情况。
有关为什么会发生这种情况以及如何解决它的任何想法吗？ 编辑：一种可能的解决方法可能是手动设置光标位置。有人知道如何做到这一点吗？我已经在网上搜索过了，但似乎没有任何 W3 支持的东西。
谢谢！
听起来像是Firefox的一个bug。你应该向Mozilla报告此问题。 - You
你不应该向Mozilla报告此问题，因为3.6.3并没有完全支持HTML5，并且也不是最新版本。请先尝试更新您的Firefox安装。另外，请问您的文件顶部是否有<!DOCTYPE html>？ - cbednarski
不确定你想做什么，你是在制作“输入表单”吗？ - Talvi Watia
我刚在Google任务中复制了这个问题。 我猜如果它对Google足够好，那对我来说也足够好了？ - Andrew
我在Mac OSX上尝试使用Firefox 3.6.6，出现了同样的问题，而且第一次单击时没有闪烁的光标。但是，使用Chrome一切正常。 - cesarnicola
显示剩余2条评论
3个回答
3

我通过使用UTF-8的“零宽度空格”来解决了这个问题。在PHP中，它是以下转义双引号：

"\xE2\x80\x8B"

然后您可以使用以下方式进行转义：trim($string, " \xE2\x80\x8B")

当这个不可见字符预加载到可编辑的div中时，这个bug将消失。

我在我的页面、源文件（和数据库...一切）中都使用UTF-8编码。

2
只需在
中添加&nbsp;即可。
1
我也遇到过这种情况，有时候它能正常工作，有时候不行。我认为这肯定是一个 bug。你可以尝试插入一个隐藏字符，一旦有一些文本，它似乎就开始闪烁了。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接