現在可以直接使用CSS3禁止網頁中文本被選中了,但只兼容Firefox/Chrome/Safari,IE10了,不過也是未來主流了,下面來看看。

或許你常常不希望用戶在你的網站上選擇文本,無論是否是出于版權的原因。通常大家會有js來實現,另一個方案就是,將-webkit-user-select 和-moz-user-select 的值設為none,這針對于移動用戶,可能會很有用。

国产视频app請謹慎使用這個屬性:因為大部分用戶是來查看信息的,他們可以復制并存儲下來以備將來之用,所以這種方法既無用也無效。如果你禁用了復制粘貼功能,用戶還是可以通過查看源文件來獲取到他們想要的內容。

body {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

上面的代碼兼容所有移動設備的瀏覽器,下面我們來看看關于user-select的一些介紹。

利用Css的屬性來禁止網頁文本選中

user-select的介紹

user-select是在css3 UI規范中新增的一個功能,用來控制內容的可選擇性。
 語法
user-select:value;
可選參數
auto——默認值,用戶可以選中元素中的內容
none——用戶不能選擇元素中的任何內容
text——用戶可以選擇元素中的文本
element——文本可選,但僅限元素的邊界內(只有IE和FF支持)
all——在編輯器內,如果雙擊/上下文點擊發生在子元素上,改值的最高級祖先元素將被選中。
国产视频app-moz-none——firefox私有,元素和子元素的文本將不可選,但是,子元素可以通過text重設回可選。 

使用示例:

.selectDemo{
     background-color:#eee;
     padding:20px;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
 }

如果想支持所有的我們可以

<script type="text/Javascript">document.oncontextmenu=function(e){return   false;};document.onselectstart=function(e){return   false;};</script>
<style>body{-moz-user-select:none;}</style>

加上這一句即可

總結

這個屬性,在之前是被用來保護網站的內容,不被用戶復制和轉載,從而保護資訊的版權,但是這樣卻對普通用戶的用戶體驗造成了傷害,而且,并不能真正的保護頁面中的內容,這對前端開發人員來說,直接查看源代碼就可以復制網頁中的問題。
国产视频app 現在,HTML5蒸蒸日上,很多網站或者web app會使用到Drag and Drop技術,user-select正好在一些情境中可以用到。