css控制頁面文字不能被選中user-select:none;


現象:html中可能有些地方不想讓用戶復制文字,或是用a標簽做了個點擊按鈕,點快的時候文字會被選中,很丑,這個時候可以使用下面的方案禁止文字選中。
原因:鼠標點快了文字會被選中。
解決方案:不同的瀏覽器設置的內容不一樣,user-select不是一個W3C的標准,瀏覽器的支持不完成,需要對不同的瀏覽器進行調整。

body{

-moz-user-select:none;/*火狐*/

-webkit-user-select:none;/*webkit瀏覽器*/

-ms-user-select:none;/*IE10*/

-khtml-user-select:none;/*早期瀏覽器*/

user-select:none;

}

user-select有2個值(none表示不能選中文本,text表示可以選擇文本)

IE6-9還沒發現相關的CSS屬性

//IE6-9

document.body.onselectstart=document.body.ondrag=function(){

returnfalse;

}
 
舉個栗子:在做APP時經常用到下面的~~
html,body{
      -webkit-touch-callout:none ;
      -webkit-text-size-adjust:none ;
      -webkit-tap-highlight-color:transparent ;
      -webkit-user-select:none ;
}
 


免責聲明!

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



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