Heim > Artikel > Web-Frontend > So deaktivieren Sie die Textauswahl in HTML
So deaktivieren Sie die Textauswahl in HTML
- 青灯夜游Original
- 2021-12-13 13:48:466725Durchsuche
In HTML können Sie das Attribut „user-select“ verwenden, um die Textauswahl zu verhindern. Sie müssen nur den Stil „user-select:none;“ zum Textelement hinzufügen, um festzulegen, ob der Benutzer verwendet wird kann Text auswählen. Wenn der Wert auf „none“ gesetzt ist, wird die Textauswahl deaktiviert.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Auswählen von Text in HTML verbieten
user-select: none |text| all | element;
Wert:
keine:Text kann nicht ausgewählt werden
Text:Kann Text auswählen
alle: Kann ausgewählt werden, wenn alle Inhalte als Ganzes betrachtet werden. Wenn Sie auf ein untergeordnetes Element doppelklicken oder im Kontext darauf klicken, ist der ausgewählte Teil das höchste Vorgängerelement, das von diesem untergeordneten Element aus zurückverfolgt wird.
-
Element:Sie können Text auswählen, der Auswahlbereich ist jedoch durch die Elementgrenze eingeschränkt Attribute
onselectstart="return false;" um den Effekt von
user-select:none zu erzielen; Safari und Chrome unterstützen dieses Tag-Attribut ebenfalls; wird bis Opera12.5 immer noch nicht unterstützt, unterstützt aber wie IE6-9 auch die Verwendung privater Tag-Attribute unselectable="on", um den Effekt von user-select zu erzielen: none; eine andere Version von nicht auswählbar. Der Wert ist aus; außer für Chrome und Safari, wenn der Text auf -ms-user-select:none;gesetzt ist > kann der Benutzer den Textblock im Textblock nicht auswählen. Wenn der Benutzer jedoch beginnt, Text in anderen Bereichen der Seite auszuwählen, kann er weiterhin den Bereichstext auswählen, wobei der Text auf -ms-user-select:none; 4; gesetzt ist . Entsprechendes Skript Das Attribut ist
. onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；
2、直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；
3、除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none;
<!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>Empfohlenes Tutorial: „
“
Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie die Textauswahl in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!