在css中,可以使用user-select屬性來禁止選中文字,只需要給文本文字元素添加“user-select:none;”樣式即可。user-select屬性可以設(shè)置或檢索是否允許用戶選中文本,當(dāng)值為“none”時(shí)表示文本不能被選擇。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中,可以使用user-select屬性來禁止選中文字。
user-select屬性設(shè)置或檢索是否允許用戶選中文本
語法:
user-select:none |text| all | element
屬性值:
-
none
:文本不能被選擇 -
text:可以選擇文本
-
all:當(dāng)所有內(nèi)容作為一個(gè)整體時(shí)可以被選擇。如果雙擊或者在上下文上點(diǎn)擊子元素,那么被選擇的部分將是以該子元素向上回溯的最高祖先元素。
-
lement:可以選擇文本,但選擇范圍受元素邊界的約束
禁止選中文字的代碼
pc端:
.not-select{ -moz-user-select:none; /*火狐*/ -webkit-user-select:none; /*webkit瀏覽器*/ -ms-user-select:none; /*IE10*/ -khtml-user-select:none; /*早期瀏覽器*/ user-select:none; }
移動(dòng):
.no-touch { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
補(bǔ)充:js方法:
ontouchstart="return false;"
在需要禁止的dom上添加這段代碼,兩種方法對(duì)于安卓和IOS的支持沒有單獨(dú)測(cè)試過。兩個(gè)同時(shí)使用,對(duì)于安卓和IOS可以起到禁止作用。
(學(xué)習(xí)視頻分享:css視頻教程)