FireFox 中内容可编辑的光标位置/样式

发布于 2024-08-16 08:16:31 字数 597 浏览 11 评论 0原文

我在 FireFox 3 中使用 contentEditable 时遇到问题。我遇到的问题是，在单击 div 后，光标将出现在 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>

替代文本

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谈情不如逗狗 2024-08-23 08:16:31

我在 Firefox 37.0.2 上遇到了完全相同的问题。在 contenteditable 的 :before 伪元素中放置零宽度空格可以修复该问题：

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

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

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 原文

留一抹残留的笑 2024-08-23 08:16:31

您需要在您想要编辑的 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>

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 原文

画离情绘悲伤 2024-08-23 08:16:31

我花了几个小时绞尽脑汁试图找到解决这个问题的方法。我想到的是将编辑器包装在默认情况下隐藏的 div 中。然后使用一些内联 JavaScript 来显示 div。这似乎使光标跳到正确的位置。虽然很脏，但是很管用！

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

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

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 原文

黑寡妇 2024-08-23 08:16:31

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

回复收藏 0 原文

写给空气的情书 2024-08-23 08:16:31

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

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

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

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

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 原文