CSS3禁止網頁中文本被選中代碼

通常大家會有js來實現，另一個方案就是，將-webkit-user-select 和-moz-user-select 的值設為none，這針對於移動用戶，可能會很有用。
請謹慎使用這個屬性：因為大部分用戶是來查看信息的，他們可以復制並存儲下來以備將來之用，所以這種方法既無用也無效。如果你禁用了復制粘貼功能，用戶還是可以通過查看源文件來獲取到他們想要的內容。

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的一些介紹。
附：user-select的介紹
user-select是在css3 UI規范中新增的一個功能，用來控制內容的可選擇性。
語法
user-select:value;
可選參數
auto——默認值，用戶可以選中元素中的內容
none——用戶不能選擇元素中的任何內容
text——用戶可以選擇元素中的文本
element——文本可選，但僅限元素的邊界內(只有IE和FF支持)
all——在編輯器內，如果雙擊/上下文點擊發生在子元素上，改值的最高級祖先元素將被選中。
-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>

加上這一句即可

 

 

【原文鏈接】