网页文本框中光标闪动过快的解决办法

引言  （ 光标闪动过快，都有点看不太清光标的位置，问我能不能调慢一点。这个问题我也早就发现了，一直以为是自己开发的编辑器有可能是js代码的问题，有可能自己开发的玩意就是不如别人开发的好吧，感觉这个查起来应该是很麻烦的事情，所以就放下没管。

        昨天无意打开tv150的用户中心发布产品页面，竟然发现这里的光标并没有论坛里的闪动那般快，于是断定自己开发的编辑器没有问题，即便是js问题也应该是和页面里其它的js冲突了，于是晚上有时间想办法排查一下这个问题。

        最简单的办法莫过于把代码一段一段删除掉，然后只放一个编辑器，再一点点往上加，这样逐渐就可以排查到问题的所在了，经过几分钟的排查，竟然发现问题出现在编辑器的qq表情上。我将表情全部删除掉之后，光标就会正常闪动，若将表情放到编辑器的边上，光标则闪个不停。

         等我仔细的观察了一下竟然发现光标的闪动速度和某个闪动频繁的表情一个频率，于是想到是不是浏览器的问题，把这个问题拿到百度和谷歌上搜索了一个遍，竟然没有人遇到和我一样的问题，于是我又去其它的几个论坛里看了看，逐渐的才把情况分析明白。

为什么输入框里的光标会闪动过快？

         我们都知道一个连续动作的图片组合起来就可以变成动画，电影就是由若干个连续图片组成，那么想要播放这一帧一帧的图片就需要有一个刷新动作，只不过这个刷新动作过快我们很难看清楚，比如我们桌面的刷新速度一般是七十/秒以上，如果不能达到这个刷新频率那么就会出现拖轨现象，所以我感觉这个应该和浏览器能显示gif图片的原理是一样的，而光标属于浏览器的一个元素，所以浏览器在显示gif动画的每一帧的时候会根据gif动画的频率来刷新显示，这时候就导致光标会受到这个刷新的影响，从而变快。

         假如我们把gif或flash以及一此js特效的闪动过快的东西从页面上去掉的话，会发现光标就又会回到正常的闪动状态。

         有了这个想法之后我就想用iframe把表情展示出现，结果发现无论怎么展示，只要是显示则就会影响到光标，这时候我在百度有啊里看到有啊社区的编辑器左侧表情竟然是静态的，我想会不会也是因为这个闪动的问题才给做成静态的呢，真没有想到百度竟然也无法解决这个问题。

         后来没办法，我也只能把第一屏的表情做成了静态的，滑动门后面的几屏还是动态的，所以当鼠标放到第二栏以后光标就会立刻变快，而放到第一栏上的时候就会变慢。

网页输入框光标闪动过快的解决办法

         如果你遇到了和我一样的问题，那请查看一下页面上是否有gif闪图（一般指闪动过快的那种），或flash，js特效闪动等元素，如果有的话，问题就在于此，把闪动的东西去掉或改变一种方式即可。）

 

解决：原创

原因 光标 与 js 滚动图片冲突

<script>
  var speed=5//速度数值越大速度越慢
  www_qpsh_com2.innerHTML=www_qpsh_com1.innerHTML
  function Marquee(){
  if(www_qpsh_com2.offsetWidth-www_qpsh_com.scrollLeft<=0)
  www_qpsh_com.scrollLeft-=www_qpsh_com1.offsetWidth
  else{
  www_qpsh_com.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  www_qpsh_com.οnmοuseοver=function() {clearInterval(MyMar)}
  www_qpsh_com.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
   
  
   function StopMove()
  {
  clearInterval(MyMar)
  }
 
  function StartMove()
  {
    MyMar=setInterval(Marquee,speed)
  }
 
  </script> 

 

文本框：

       this.name.Attributes.Add("onblur", "StartMove()");
       this.name.Attributes.Add("onfocus", "StopMove()");
       this.pwd.Attributes.Add("onblur", "StartMove()");
       this.pwd.Attributes.Add("onfocus", "StopMove()");
       this.code.Attributes.Add("onblur", "StartMove()");
       this.code.Attributes.Add("onfocus", "StopMove()");