Menu
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.
contentEditable has focus and cursor
is blinking within the div, but
there is NO text in the divcontentEditable
divI 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!
386
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)
172
Just add a into <div>.
21
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
