html怎麼禁止文字選擇
- 青灯夜游原創
- 2021-12-13 13:48:466723瀏覽
在html中，可以利用user-select屬性來禁止文字選擇，只需要為文字元素添加「user-select:none;」樣式即可；user-select屬性用於設定使用者是否能夠選中文本，當值為「none」可讓文本不能被選擇。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
html中禁止文字被選取
user-select: none |text| all | element;
取值：
-
#none:
文字不能被選擇 -
text:
可以選擇文字 -
all :
當所有內容作為一個整體時可以被選擇。如果雙擊或在上下文上點擊子元素，那麼被選取的部分將是以該子元素向上回溯的最高祖先元素。 -
element:
可以選取文本，但選取範圍受元素邊界的限制
##說明：
1、IE6-9不支援該屬性，但支援使用標籤屬性 onselectstart="return false;" 來達到 user-select :none
#2、直到Opera12.5仍不支援該屬性，但和IE6-9一樣，也支援使用私有的標籤屬性 unselectable="on" 來達到 user-select:none
3、除Chrome和Safari外，在其它瀏覽器中，如果將文字設為 -ms-user-select:none;，則使用者將無法在該文字區塊中開始選擇文字。不過，如果使用者在頁面的其他區域開始選擇文本，則使用者仍可繼續選擇將文字設定為 -ms-user-select:none;
4、對應的腳本特性為userSelect
。html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>user-select</title>
</head>
<style>
.test {
padding: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
background: #eee;
}
</style>
<body>
<div onselectstart="return false;" unselectable="on">禁止选中文本内容</div>
</body>
</html>推薦教學：《html影片教學》###以上是html怎麼禁止文字選擇的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn