網頁文本框中光標閃動過快的解決辦法

引言光標閃動過快,都有點看不太清光標的位置,問我能不能調慢一點。這個問題我也早就發現了,一直以爲是自己開發的編輯器有可能是js代碼的問題,有可能自己開發的玩意就是不如別人開發的好吧,感覺這個查起來應該是很麻煩的事情,所以就放下沒管。

昨天無意打開tv150的用戶中心發佈產品頁面,竟然發現這裏的光標並沒有論壇裏的閃動那般快,於是斷定自己開發的編輯器沒有問題,即便是js問題也應該是和頁面裏其它的js衝突了,於是晚上有時間想辦法排查一下這個問題。

最簡單的辦法莫過於把代碼一段一段刪除掉,然後只放一個編輯器,再一點點往上加,這樣逐漸就可以排查到問題的所在了,經過幾分鐘的排查,竟然發現問題出現在編輯器的qq表情上。我將表情全部刪除掉之後,光標就會正常閃動,若將表情放到編輯器的邊上,光標則閃個不停。

等我仔細的觀察了一下竟然發現光標的閃動速度和某個閃動頻繁的表情一個頻率,於是想到是不是瀏覽器的問題,把這個問題拿到百度和谷歌上搜索了一個遍,竟然沒有人遇到和我一樣的問題,於是我又去其它的幾個論壇裏看了看,逐漸的才把情況分析明白。

爲什麼輸入框裏的光標會閃動過快?

我們都知道一個連續動作的圖片組合起來就可以變成動畫,電影就是由若干個連續圖片組成,那麼想要播放這一幀一幀的圖片就需要有一個刷新動作,只不過這個刷新動作過快我們很難看清楚,比如我們桌面的刷新速度一般是七十/秒以上,如果不能達到這個刷新頻率那麼就會出現拖軌現象,所以我感覺這個應該和瀏覽器能顯示gif圖片的原理是一樣的,而光標屬於瀏覽器的一個元素,所以瀏覽器在顯示gif動畫的每一幀的時候會根據gif動畫的頻率來刷新顯示,這時候就導致光標會受到這個刷新的影響,從而變快。

假如我們把gifflash以及一此js特效的閃動過快的東西從頁面上去掉的話,會發現光標就又會回到正常的閃動狀態。

有了這個想法之後我就想用iframe把表情展示出現,結果發現無論怎麼展示,只要是顯示則就會影響到光標,這時候我在百度有啊裏看到有啊社區的編輯器左側表情竟然是靜態的,我想會不會也是因爲這個閃動的問題纔給做成靜態的呢,真沒有想到百度竟然也無法解決這個問題。

後來沒辦法,我也只能把第一屏的表情做成了靜態的,滑動門後面的幾屏還是動態的,所以當鼠標放到第二欄以後光標就會立刻變快,而放到第一欄上的時候就會變慢。

網頁輸入框光標閃動過快的解決辦法

如果你遇到了和我一樣的問題,那請查看一下頁面上是否有gif閃圖(一般指閃動過快的那種),或flashjs特效閃動等元素,如果有的話,問題就在於此,把閃動的東西去掉或改變一種方式即可。


解決:原創

原因光標 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. {clearInterval(MyMar)}
 www_qpsh_com. {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()");


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章