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 e back, the caret magically disappears.)

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 e back, the caret magically disappears.)

• javascript
• firefox

3 Answers 3

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.

The style attribute -moz-user-input can be used in Firefox 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.

E.g.:

// to disallow users to enter input
<asp:TextBox ID="uxFromDate" runat="server" style="-moz-user-input: disabled;"></asp:TextBox>

// to allow users to enter input
<asp:TextBox ID="uxFromDate" runat="server" style="-moz-user-input: enabled ;"></asp:TextBox>

Refer to https://developer.mozilla/en/CSS/-moz-user-input for further reference.

This solve the ploblem, looks like firefox is just checking is own way to make things :P

 getDoc().designMode  = "off";