Question

我在我的网站上使用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>

以下是重现的步骤。

contentEditable有焦点和光标在div中眨眼，但是 div中没有文字
用户点击contentEditable 格
div仍然显示焦点，但那里现在没有闪烁的光标，而且用户无法在div中输入输入

我在Ubuntu上使用Firefox 3.6.3和在Windows XP上使用Firefox 3.5重现了此错误。 Chrome不会发生这种情况。

关于为什么会发生这种情况的想法以及如何解决这个问题？

编辑：一种可能的解决方法是手动设置光标所在的位置。有谁知道如何做到这一点？我一直在网上搜索，但看起来没有任何W3支持。

谢谢！

Answer 1

我使用UTF“零宽度空间”修复它。在PHP中，它是以下转义的双引号：

“\ XE2 \ X80 \ x8B”

然后你可以使用：trim（$ string，“\ xE2 \ x80 \ x8B”）

来转义它

如果在可编辑div中预加载了此隐形字符，则此错误将消失。

我对我的页面使用UTF-8编码，也使用源文件（和数据库......所有内容）

Answer 2

只需将 添加到<div>。

Answer 3

也发生在我身上，有时它起作用，有时不起作用。肯定是我说的一个错误。你可以尝试插入一个隐藏的角色，一旦有一些文字，它似乎开始闪烁。

Firefox contentEditable div焦点问题

3 个答案: