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

Ben McCann
  • 18,548
  • 25
  • 83
  • 101
  • Possible duplicate of [Firefox sets wrong caret position contentEditable with :before](https://stackoverflow.com/questions/21986985/firefox-sets-wrong-caret-position-contenteditable-with-before) – vsync Jul 13 '18 at 10:27

6 Answers6

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.

mbaer3000
  • 479
  • 4
  • 5
  • 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`. – jfd Jul 10 '15 at 11:33
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>
user240609
  • 1,060
  • 10
  • 17
  • 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? – Ben McCann Dec 31 '09 at 23:47
  • It seems that part is a bug. The same issue happens on this demo http://valums.com/wp-content/uploads/2009/10/editableText/demo/demo.htm – user240609 Jan 01 '10 at 00:24
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.

Blazes
  • 4,721
  • 2
  • 22
  • 29
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>
William
  • 8,007
  • 5
  • 39
  • 43
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.

Ben McCann
  • 18,548
  • 25
  • 83
  • 101
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.

optimista
  • 804
  • 1
  • 13
  • 27