HTMLでテキスト選択を無効にする方法-htmlチュートリアル-php.cn

HTMLでテキスト選択を無効にする方法

青灯夜游

リリース： 2021-12-13 13:48:46

オリジナル

6748 人が閲覧しました

HTML では、user-select 属性を使用してテキストの選択を禁止できます。「user-select:none;」スタイルをテキスト要素に追加するだけで済みます。user-select 属性は次の目的で使用されます。テキスト、値が「なし」の場合、テキストは選択できません。

HTMLでテキスト選択を無効にする方法

このチュートリアルの動作環境: 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 もこのタグ属性をサポートします;

2. この属性は Opera12.5 まではまだサポートされていませんが、IE6-9 と同様に、プライベートタグ属性

unselectable="on" を使用して user-select:none の効果を実現します; unselectable の他の値はオフです;

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 中国語 Web サイトの他の関連記事を参照してください。