css禁止選中文本_兼容實現禁用選擇功能

有時候，我們需要使頁面內容不可選擇。首先想到的是一個css屬性：user-select。user-select有兩個值：

none：用戶不能選擇文本 
text：用戶可以選擇文本  

 

禁用選擇代碼實現

html:

<p>你可以選擇我。</p>
<p class="noselect">你不能選擇我！</p>

　　

css:

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}

新片場https://www.wode007.com/sites/73286.html 傲視網https://www.wode007.com/sites/73285.html

需要注意的是：

1、user-select並不是一個W3C的css標准屬性，瀏覽器支持的不完整，需要對每種瀏覽器進行調整  。

2、在 IE < 10 和Opera < 15中我們需要在需要禁止選中的元素上面添加一個屬性unselectable="on"，否則可能不會生效哦。

 

除了css外，我們同樣可以使用js來實現：

document.body.onselectstart = document.body.ondrag =function(){
    return false;
}