Chrome 21 (and below) has some strange behavior towards elements with the “contenteditable” attribute, if you dynamically clear its text/content on click using $('.className').text("") or $('.className').html(""). After one click, the text/content clears, but there’s no cursor. If you click again, then the cursor appears.
Note 1: Clicking an empty area of the "contenteditable" element makes the cursor appear. Clicking the text itself, however, makes you click a 2nd time to show the cursor.
Note 2: Tabbing/focusing into the element DOES NOT have the same problem.
This is very annoying, and surprising that only Chrome behaves this way. Basically, when you're hooking onto the "focus" event to clear your element's content, clicking the text of the element doesn't trigger the "focus" event you need. That's why the second click is required – to trigger the actual focus event. And again, clicking into your element's empty area fires off the focus event with one click.
Code example after the jump...
Wrap .html() or .text() call with a JavaScript setTimeout delay:
Applicable use: A search box with pre-populated text (pretty much a placeholder) that you want to clear on click.
Developer's Note: The "contenteditable" attribute has been around IE 5.5. Implementations in today's browsers are generally very good. Making non-input elements editable can be very powerful when used right. Learn more about "contenteditable" over at HTML5Doctor.
Loading ...
