我们能够避免闪烁的光标用DIV重叠(Can we avoid blinking cursor ove

2019-10-18 05:49发布

我一直在寻找任何方式我们可以处理光标闪烁在其他分区。 为了使我的发言清楚我增加了屏幕截图 -

  1. 灰色着色的div是在创建该带顶部的固定定位的div。
  2. 与左边框的白色区域实际上是与属性CONTENTEDITABLE =“真”,这使得与可编辑区域一个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>

Answer 1:

在我看来,你的答案是:它不会很快被固定的任何

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

闪烁文本光标与DIV重叠

状态:关闭为延期

描述

输入的文本光标变成在重叠的div可见。 文字光标不应该成为可见的,但留在重叠的div下,由于整个输入(或可编辑的文本域)保持这种DIV下方。



Answer 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;
        }


Answer 3:

我有同样的问题,我解决的办法是添加blur()函数的输入参与这意味着每次用户滚动文档火模糊()功能的用户。

坏处
当用户滚动输入失去焦点。



文章来源: Can we avoid blinking cursor overlapping with div