Question

我在FireFox 3中使用contentEditable时遇到问题。我遇到一个问题，在我点击它之后光标会出现在div上面或者只是部分显示在div中（直到我开始输入它的行为正确）。关于如何阻止这种情况发生的任何想法？

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

Answer 1

我在Firefox 37.0.2中遇到了完全相同的问题。在contenteditable＆amp; s：在伪元素之前放置一个零宽度空间来解决问题：

repr()

此修复程序适用于所有现代浏览器，包括IE11，它的插入位置问题与Firefox非常相似。

Answer 2

您需要在想要编辑的DIV之间放置某种内容或HTML：

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

Answer 3

我正在喋喋不休地试着寻找一种方法来解决这个问题。我想出的是将编辑器包装在一个默认隐藏的div中。然后使用一点内联javascript来显示div。这似乎使光标跳到正确的位置。它很脏，但它有效！

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

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

Answer 4

我在最新版本的FF 22中也遇到过这个问题。在我的情况下，我的外部div（例如＆＃34;编辑器＆＃34;如上所述）没有高度，我的光标位置低于contenteditable DIV。通过向外部div提供高度，例如， height: 1.5em;，光标正确定位。

Answer 5

我等待并使用仅在Firefox 4及更高版本中可编辑的内容。我提交了这个以及Mozilla团队为FF 4修复的其他一些错误。

Answer 6

这可以通过创建盲目div并为其添加焦点来解决，然后您的浏览器不会专注于contenteditable元素，但是用户应该点击它并且它会在正确的位置显示光标。

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

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

有一种方法，但它没有解决问题，只是聪明起来。

fireFox中的contentEditable游标位置/样式

6 个答案: