ホームページ > 記事 > ウェブフロントエンド > HTMLでテキスト選択を無効にする方法
HTMLでテキスト選択を無効にする方法
- 青灯夜游オリジナル
- 2021-12-13 13:48:466741ブラウズ
HTML では、user-select 属性を使用してテキストの選択を禁止できます。「user-select:none;」スタイルをテキスト要素に追加するだけで済みます。user-select 属性は次の目的で使用されます。テキスト、値が「なし」の場合、テキストは選択できません。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
HTML でのテキストの選択を禁止します
user-select: none |text| all | element;
値:
none:テキストは選択できません
text:テキストは選択できます
all :すべてのコンテンツを全体として捉える場合に選択できます。子要素をダブルクリックするか、コンテキストに応じてクリックすると、選択した部分がその子要素から遡った最上位の祖先要素になります。
element:テキストは選択できますが、選択範囲は要素の境界によって制限されます
説明:
1. IE6-9 はこの属性をサポートしていませんが、 # を達成するためのラベル属性 onselectstart="return false;" の使用をサポートしています。 ##user-select :none 効果; Safari と Chrome もこのタグ属性をサポートします;
unselectable="on" を使用して user-select:none の効果を実現します; unselectable の他の値はオフです;
-ms-user-select:none; に設定されている場合、ユーザーはそのブラウザでテキストの選択を開始できません。テキストブロック。ただし、ユーザーがページの別の領域でテキストの選択を開始した場合でも、テキストを -ms-user-select:none;;## に設定することで、その領域のテキストの選択を続けることができます。 4、対応するスクリプト属性は
です。
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でテキスト選択を無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。