contentEditable cursor position/style in FireFox

2019-04-09 17:09发布

站内问答 / 移动开发
2055 6 5

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

6条回答
Bombasti
2楼-- · 2019-04-09 17:52

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.

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
3楼-- · 2019-04-09 17:54

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>
查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
4楼-- · 2019-04-09 17:55

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.

查看更多
0人赞 添加讨论(0) 举报
趁早两清
5楼-- · 2019-04-09 17:57

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.

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
6楼-- · 2019-04-09 17:58

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>
查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
7楼-- · 2019-04-09 18:08

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)