Home/ Questions/Q 1106063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T01:44:00+00:00

I am using contentEditable div tags on my website and I have noticed a

  • 0

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.

  1. contentEditable has focus and cursor
    is blinking within the div, but
    there is NO text in the div
  2. user click on the contentEditable
    div
  3. 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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)

    • 0