Firefox 3.03 and contentEditable

Question

I'm using the contentEditable attribute on a DIV element in Firefox 3.03. Setting it to true allows me to edit the text content of the DIV, as expected.

Then, when I set contentEditable to "false", the div is no longer editable, also as expected.

However the flashing caret (text input cursor) remains visible even though the text is no longer editable. The caret is now also visible when I click on most other text in the same page, even in normal text paragraphs.

Has anyone seen this before? Is there any way to force the caret hidden?

(When I either resize the browser or click within another application, and come back, the caret magically disappears.)

Answer 1

I've dealt with this and my workaround is clearing the selection when I disable contentEditable:

if ($.browser.mozilla) { // replace with browser detection of your choice
  window.getSelection().removeAllRanges();
}

I am actually removing the "contenteditable" attribute for browsers other than IE, rather than setting it to false:

if ($.browser.msie) {
  element.contentEditable = false;
}
else {
  $(element).removeAttr( 'contenteditable' );
}

The browsers manage the contentEditable attribute inconsistently and my testing revealed that this worked better overall. I don't remember if this contributed to fixing the caret problem, but I'm throwing it in here just in case.

Answer 2

The style attribute "-moz-user-input" can be used in FF to get the functionality "contenteditable=false" working.
The value assigned defines if user input is accepted. the possible values are

none : The element does not respond to user input
enabled : The element can accepts user input. This is default
disabled : The element does not accept user input.

Eg : // to disallow users to enter input
// to allow users to enter input

Refer to https://developer.mozilla.org/en/CSS/-moz-user-input Online