Firefox中可满足的光标位置/样式
-
22-09-2019 - |
题
我在Firefox 3中使用可满足的3.我遇到了一个问题,在我单击它之后,光标将出现在上方或仅部分出现在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>
解决方案 6
我等待并使用了仅在Firefox 4及更高版本中编辑的内容。我提出了此事,以及Mozilla团队为FF 4修复的其他一些错误。
其他提示
我在Firefox 37.0.2上遇到了完全相同的问题。在可满足的内容中放置零宽度空间:在伪元素解决问题之前:
.contenteditable:empty:before {
content: "\200B";
display: inline;
}
该修复程序在包括IE11在内的所有现代浏览器中都可以使用,该浏览器的位置问题也与Firefox的问题非常相似。
您需要在需要编辑的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>
我花了几个小时的时间嘎嘎作响,试图找到一种解决这个问题的方法。我想到的是将编辑器包裹在默认情况下隐藏的DIV中。然后使用一些内联JavaScript显示DIV。这似乎使光标跳入正确的位置。它很脏,但它起作用了!
<div id="editor" style="display: none;">
<% call RTE.renderTextArea(true) %>
</div>
<script>document.getElementById("editor").style.display="";</script>
我还在最新版本的FF 22中遇到了这个问题。在我的情况下,我的外部div(例如上述编辑器)没有高度,而我的光标位置则低于可满足的div。通过为外部提供高度,例如 height: 1.5em;
, ,光标正确定位。
可以通过创建盲目的div来解决,然后将焦点添加到它,然后您的浏览器不专注于可满足的元素,但是用户应该单击该元素,并且该情况在正确的位置显示了光标。
$(document).ready(function(){
$("#target_blind").focus();
});
<div id="target_blind" style="display:none;"></div>
<div id="target" contenteditable="true"></div>
有一种方法,但是它不能解决问题,只能聪明。
不隶属于 StackOverflow