contentEditable cursor position/style in FireFox

S

6

7

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

Settler answered 31/12, 2009 at 23:7 Comment(1)

Possible duplicate of Firefox sets wrong caret position contentEditable with :before – Vicious 13/7, 2018 at 10:27

S

0

I waited and used the content editable only in Firefox 4 and higher. I filed this and a few other bugs which the Mozilla team has fixed for FF 4.

Settler answered 3/8, 2010 at 5:57 Comment(0)

V

8

I am having the exact same issue with Firefox 37.0.2. Putting a zero width space in the contenteditable's :before pseudo element fixes the issue:

.contenteditable:empty:before {
  content: "\200B";
  display: inline;
}

The fix works in all modern browsers, including IE11, which also has a caret position issue quite similar to Firefox's.

Vickeyvicki answered 13/5, 2015 at 11:41 Comment(1)

This caused an added a blank line on top of the .contenteditable-container when you pressed Enter in IE11 for me. This can be fixed by also applying the :empty-pseudoselector to .contenteditable. – Frear 10/7, 2015 at 11:33

E

2

You need to put some sort of content or HTML between the DIV that you want editable:

<div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true">Some sort of content or HTML here.</div>

Ebneter answered 31/12, 2009 at 23:30 Comment(2)

Thanks. So it appears that simply putting a space between the start and end tags makes the div editable. However, I then have the problem I described where the cursor appears above/outside the div. Any ideas on how I can deal with that? – Settler 31/12, 2009 at 23:47

It seems that part is a bug. The same issue happens on this demo valums.com/wp-content/uploads/2009/10/editableText/demo/… – Ebneter 1/1, 2010 at 0:24

R

1

I was rattling my brain for hours trying to find a way to hack around this. What I came up with was to wrap the editor in a div which is hidden by default. Then use a little inline javascript to display the div. This seems to make the cursor jump into the correct position. Its dirty, but it works!

<div id="editor" style="display: none;">
     <% call RTE.renderTextArea(true) %>
</div>

<script>document.getElementById("editor").style.display="";</script>

Restless answered 6/6, 2010 at 22:39 Comment(0)

A

1

I also encountered this problem in the latest version of FF 22. In my case, my outer div (e.g. "editor" as above) did not have a height, and my cursor position was below the contenteditable div. By providing a height to the outer div, e.g. height: 1.5em;, the cursor positioned itself correctly.

Aesculapius answered 16/7, 2013 at 14:10 Comment(0)

S

0

I waited and used the content editable only in Firefox 4 and higher. I filed this and a few other bugs which the Mozilla team has fixed for FF 4.

Settler answered 3/8, 2010 at 5:57 Comment(0)

P

0

That can be solved through creating blind div and add focus to it, then your browser isn't focused on contenteditable element, but user should click on that and it that case it shows cursor in the right place.

$(document).ready(function(){
    $("#target_blind").focus();
});

<div id="target_blind" style="display:none;"></div>
<div id="target" contenteditable="true"></div>

There's one way, however it doesn't solve problem, only smarten up.

Pandect answered 16/11, 2011 at 2:16 Comment(0)

Recommended topics

Hot tags