Firefox contentEditable div focus issues
I am using contentEditable div tags on my website and I have noticed a weird issue when using Firefox.
Here is example source code:
<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>
Here are the steps to reproduce.
contentEditablehas focus and cursor is blinking within the div, but there is NO text in the div- user click on the
contentEditablediv - the div still shows focus, but there is now NO blinking cursor, and the user cannot enter input into the div
I have reproduced this error with Firefox 3.6.3 on Ubuntu, and Firefox 3.5 on Windows XP. It does not happen with Chrome.
Any ideas about why this is happening and what to do to fix it?
EDIT: One possible work around might be to manually set where the cursor is. Does anyone know how to do this? I've been searching online, but it doesn't look like there is anything W3 supported.
Thanks!
I fixed it by using UTF "Zero-width space". In PHP, it's the following escaped double-quote:
"\xE2\x80\x8B"
You can then escape it using: trim($string, " \xE2\x80\x8B")
When this invisible character is preloaded in the editable div, this bug will disappear.
I use UTF-8 encoding for my page and also source file (and database... everything)
Just add a into <div>.
Happened to me too, sometimes it works, sometimes not. definately a bug i'd say. you could try inserting a hidden character, it seems to start blinking once there's some text.
加载中,请稍侯......
精彩评论