我们可以避免闪烁光标与 div 重叠吗答案

【问题标题】：Can we avoid blinking cursor overlapping with div我们可以避免闪烁光标与 div 重叠吗
【发布时间】：2013-06-09 17:55:24
【问题描述】：

我一直在寻找可以处理光标在其他 div 上闪烁的任何方法。为了让我的声明更清楚，我添加了一个屏幕截图 -

灰色 div 是位于顶部的固定位置 div，用于创建功能区。
左边有边框的白色区域实际上是一个属性为contentEditable="true"的div，它是可编辑区域。 Imp- 可编辑区域的高度可以随着内容而增加，即我们不能在那里有滚动条。

因此，当内容超出屏幕并向下滚动时，如果光标已放置在可编辑区域内，则它会显示在功能区上方。

如果选择了图像上可调整大小的边框，也会发生同样的情况。而且，这仅适用于 IE。 Firefox 和 chrome 没有问题。

代码如下：

<head runat="server">
<title></title>
<style type="text/css">
    .wrapper {
        width:960px;
        height:auto;
        min-height:600px;
        margin-left:auto;
        margin-right:auto;
        border-left:1px solid #cfcfcf;
        border-right:1px solid #cfcfcf;
        box-shadow:0px 10px 10px #6f6f6f;
        background-color:#ffffff;
        margin-top:100px;
    }
    .container {
        width:100%;
        height:auto;
        min-height:800px;
        padding:10px;
        font-family:Arial;
        border:1px solid #3f3f3f;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .editor-ribbon {
        height:100px;
        position:fixed;
        left:0px;
        top:0px;
        width:100%;
        border-bottom:1px solid #cfcfcf;
        width:100%;
        background-color: #ffffff;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f1f1f1', endColorstr = '#e3e3e3');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f1f1f1', endColorstr = '#e3e3e3')";
        background-image: -moz-linear-gradient(top, #f1f1f1, #e3e3e3);
        background-image: -ms-linear-gradient(top, #f1f1f1, #e3e3e3);
        background-image: -o-linear-gradient(top, #f1f1f1, #e3e3e3);
        background-image: -webkit-gradient(linear, center top, center bottom, from(#f1f1f1), to(#e3e3e3));
        background-image: -webkit-linear-gradient(top, #f1f1f1, #e3e3e3);
        background-image: linear-gradient(top, #f1f1f1, #e3e3e3);
    }
</style>
</head>
<body>
  <form id="form1" runat="server">
    <div class="editor-ribbon"></div>
    <div class="wrapper">
        <div class="container" contenteditable="true">

        </div> 
    </div>
  </form>
</body>

【问题讨论】：

您可以尝试使 div 不可选择：stackoverflow.com/questions/924916/…
@Peter：感谢您的快速响应，但在该区域内，我正在执行简单的文本编辑，例如 - 制作粗体、斜体等，如果没有选择，这是不可能的。
抱歉，我以为丝带是带闪烁的，你能创建一个fiddle 来复制错误
你去jsfiddle.net/4drs2
@colosso：非常感谢！但是我们能看到在 IE 中出现的相同效果吗？ FF & Chrome 没有这个问题！

标签： javascript html css contenteditable

【解决方案1】：

在我看来，您的答案是：不会很快修复

https://connect.microsoft.com/IE/feedback/details/841043/blinking-text-cursor-overlapping-with-div

闪烁的文本光标与 div 重叠

状态：已推迟关闭

说明

输入的文本光标在重叠的 div 上可见。文本光标不应该变得可见，而是停留在重叠的 div 下方，因为整个输入（或可编辑的文本区域）都停留在该 div 下方。

【讨论】：

【解决方案2】：

问题与功能区的背景滤镜/图像属性有关。

将背景更改为简单的颜色可以解决问题。

http://jsfiddle.net/4drs2/6/

  .editor-ribbon {
    height:100px;
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    border-bottom:1px solid #cfcfcf;
    width:100%;
    background-color: gray;
        }

【讨论】：

感谢您的回复，但我想您可能还没有尝试过红色、黄色、白色或任何其他浅色的解决方案。它仍然无法正常工作。

【解决方案3】：

我遇到了同样的问题，我解决的方法是将 blur() 函数添加到所涉及的输入中，这意味着每次用户滚动文档时都会触发 blur() 函数。

缺点
用户滚动时输入失去焦点。

【讨论】：