7

我在 FireFox 3 中使用 contentEditable 时遇到了问题。我有一个问题，在我单击它后光标将出现在 div 上方或仅部分出现在 div 中（直到我开始输入时它的行为正确）。关于如何阻止这种情况发生的任何想法？

HTML：

<html>
  <head><title>测试页</title></head>
  <正文>
    <div id="editor" style="position:absolute; left:157px; top:230px; width:120px; height:30px">
      <div id="input" style="width:100%; height:100%;border:1px 纯黑色;outline:none" contentEditable="true"> </div>
    </div>
  </正文>
</html>

替代文字

4

6 回答 6

8

我在 Firefox 37.0.2 上遇到了完全相同的问题。在 contenteditable 的 :before 伪元素中放置一个零宽度空间可以解决问题：

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

该修复适用于所有现代浏览器，包括 IE11，它也有一个与 Firefox 非常相似的插入符号位置问题。

于 2015-05-13T11:41:59.357 回答
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>
于 2009-12-31T23:30:47.857 回答
1

我花了好几个小时想办法解决这个问题。我想出的是将编辑器包装在默认隐藏的 div 中。然后使用一点内联 javascript 来显示 div。这似乎使光标跳到正确的位置。它很脏，但它有效！

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

<script>document.getElementById("editor").style.display="";</script>
于 2010-06-06T22:39:30.210 回答
1

我在最新版本的FF 22中也遇到了这个问题。在我的例子中，我的外部div（例如上面的“编辑器”）没有高度，我的光标位置在contenteditable div的下方。通过为外部 div 提供高度，例如height: 1.5em;，光标自身定位正确。

于 2013-07-16T14:10:37.983 回答
0

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

于 2010-08-03T05:57:52.203 回答
0

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

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

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

有一种方法，但它不能解决问题，只能变聪明。

于 2011-11-16T02:16:31.947 回答