contentEditable cursor position/style in FireFox

问题

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>

回答1:

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.

回答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>

回答3:

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>

回答4:

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.

回答5:

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.