IE8,IE9,IE10闪烁光标问题

4
我正在制作一个编辑器,它会在选中文本时显示工具栏。在IE浏览器中遇到的问题是闪烁光标仍然出现在工具栏上方,这个问题只出现在IE浏览器中。

$('.content').mouseup(function(e) {
  $('.shy').css({
    top: e.pageY - 30 + 'px',
    left: e.pageX - 30 + 'px'
  });
  $('.shy').show();
});
.content {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  overflow: hidden;
  word-wrap: break-word;
  z-index: 1;
}
.shy {
  height: 100px;
  width: 100px;
  background-color: orange;
  z-index: 2;
  overflow: hidden;
  word-wrap: break-word;
  display: none;
  position: absolute;
}
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<div contenteditable="true" class='content'>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</div>
<div class='shy'>
  <div>

把焦点移开不是一个选项,因为这个应用程序中有更多的组件,这个修复措施对于那些情况是无效的。这个修复方案需要完全自主。


如果您无法操作焦点,那么您可能会很遗憾,因为正如在此示例中指出的那样,光标似乎是由浏览器本身控制的。 - Zach Esposito
@ZachEsposito:是的,似乎集中注意力是唯一的选择,但真的很糟糕。这意味着我必须在每个位于contenteditable上方的其他组件中进行修复。 - pickhunter
1个回答

0

只需添加

$('.shy').focus();

光标将停止在IE7-IE10上闪烁(已测试)

http://jsfiddle.net/2QAxk/6/

UDP1 抱歉,我没有看到你关于“焦点”不是一个选项的更新...


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接