html的標簽中 unselectable=on 屬性的作用


 

在IE瀏覽器中,當input獲得焦點時,點擊有unselectable="on"屬性的標簽時,不會觸發onblur事件。

加上該屬性的元素不能被選中。


< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>     
     < head>
          < title>html的標簽unselectable=on屬性的作用</title>
         < meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    < /head>
  <body>
  <div>
   < p><input id="txt" type="text"/></p>
 < p><span unselectable="on">unselectable="on"</span></p>
 < p><span unselectable="">span測試2 unselectable=""</span></p>
 
 < p><div unselectable="on">div測試1 unselectable="on"</div></p>
 < p><div unselectable="">div測試2 unselectable=""</div></p>
  </body>
< /html>
< script language="javascript" type="text/javascript">
    (function () {
        var txt = document.getElementById("txt");
        txt.onblur = function () { alert('失去焦點了'); }
    })();
< /script>

 

在IE下給DIV設置unselectable與onselectstart屬性,可以讓div的內容不能選中,這個功能在很多情況下,非常有用,但是他的bug太明顯,

直接使用一個DIV是可以的,比如:

  1. <div unselectable="on" onselectstart="return false;">不能選中的內容</div>  


但是假如在這個DIV前面在出現一個普通的DIV,那就有問題了,比如:

  1. <div>普通DIV<div>  
  2. <div unselectable="on" onselectstart="return false;">從前面一個DIV開始選,就可以選中本部分內容,只有從該DIV結束部分才能不選中</div

目前我還沒找到很好的解決方案,要么在body里用onselectstart="return false;",但是那會導致整個頁面都無法選中;或者在所有div或者類似DIV的容器里都要設置onselectstart="return false;",才能徹底解決。


Firefox下的解決方案:

style="-moz-user-select:none;" 

Chrome下的解決方案:

style="-webkit-user-select:none;"

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM