contentEditable cursor position/style in FireFox

Posted by Ben McCann on Stack Overflow See other posts from Stack Overflow or by Ben McCann
Published on 2009-12-31T23:07:44Z Indexed on 2010/06/06 22:42 UTC
Read the original article Hit count: 516

Filed under:

richtextbox

|

contenteditable

|

rich-text

|

richedit

|

richtextediting

I'm having trouble using contentEditable in FireFox 3. I have a problem where the cursor will appear above or only partially in the div after I click in it (until I start typing at which time it behaves correctly). Any ideas on how I can stop this from happening?

HTML:

<html>
  <head><title>Test Page</title></head>
  <body>
    <div id="editor" style="position:absolute; left:157px; top:230px; width:120px; height:30px">
      <div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true"> </div>
    </div>
  </body>
</html>

alt text

© Stack Overflow or respective owner

Related posts about richtextbox

Sharing WPF RichTextBox content with Silverlight RichTextBox

as seen on Stack Overflow - Search for 'Stack Overflow'
Has anyone figured out the best way to persist a WPF and Silverlight RichTextBox content so that it can be shared between the two? I haven't had the time to test through this so I wanted to see if anyone else has. I currently have a WPF applicaiton that saves the content of a RichTextBox as a blob… >>> More
Bindable richTextBox still hanging in memory {WPF, Caliburn.Micro}

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I use in WFP Caliburn.Micro Framework. I need bindable richTextbox for Document property. I found many ways how do it bindable richTextBox. But I have one problem. From parent window I open child window. Child window consist bindable richTextBox user control. After I close child window and… >>> More
[WPF] How to register to/listen to richtextbox commando's?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm creating a simple editor within our application using the WPF RichTextBox. Above it I've added the reguslar buttons like Bold, Italic, etc. These buttons use the RichTextBox's commands to set these properties, but next to these buttons, the commands also get send with CTRL+B, CTRL+I, etc. I want… >>> More
[WPF] How to register to/listen to richtextbox command's?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm creating a simple editor within our application using the WPF RichTextBox. Above it I've added the reguslar buttons like Bold, Italic, etc. These buttons use the RichTextBox's commands to set these properties, but next to these buttons, the commands also get send with CTRL+B, CTRL+I, etc. I want… >>> More
A Bindable WPF RichTextBox

as seen on Code Project - Search for 'Code Project'
An article about Bindable WPF RichTextBox >>> More

Related posts about contenteditable

Make an h2 tag unremovable in a contenteditable section

as seen on Stack Overflow - Search for 'Stack Overflow'
is it possible to make a section within a contenteditable element permanent, so that a user cannot remove it? I have an h2 tag in a contentEditable div. I don't want the user to edit the h2 tag, so I set contentEditable=false, but the user can still select and remove it, which I want to disallow… >>> More
Set caret position in contenteditable div layer in Chrome/webkit

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello, I'm trying to set the caret position in a contenteditable div layer, and after a bit of searching the web and experimenting I got it to work in firefox using this: function set(element,position){ element.focus(); var range= window.getSelection().getRangeAt(0); range.setStart(element… >>> More
How to move cursor to end of contenteditable entity

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I need to move caret to end of 'contenteditable' node like on gmail notes widget i read threads on stackoverflow, but that solutions use input's and doesn't work with content editable >>> More
contentEditable javascript caret placement in div

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a contentEditable div. Let's say the user clicks a button that inserts HTML into the editable area. So, they click a button and the following is added to the innerHTML of the contentEditable div: <div id="outside"><div id="inside"></div></div> How do I automatically… >>> More
How to edit a link within a contentEditable div

as seen on Stack Overflow - Search for 'Stack Overflow'
Does anyone have any suggestions on how to edit an link in a contentEditable div? It would be ideal once the link is either clicked with mouse, or the cursor hits the link, that the a small prompt would pop up and allow the user to change the href property of the link. The prompt isn't the issue… >>> More