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

HTMLでテキストの選択を解除する方法

醉折花枝作酒筹

リリース： 2023-01-06 11:16:19

オリジナル

3902 人が閲覧しました

HTML では、user-select 属性を使用してテキストの選択を解除できます。要素に「user-select:none」コードを設定するだけです。 user-select 属性は、ユーザーがテキストを選択できるかどうかを設定するために使用され、値が none の場合、テキストは選択できないことを意味します。

HTMLでテキストの選択を解除する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

user-select 属性は CSS3 の新しい属性で、ユーザーがテキストを選択できるかどうかを設定するために使用されます。置換要素を除くすべての要素に使用可能 user-selectの主な使い方と注意点を以下に説明します詳細は以下のcss3ドキュメントの説明を参照してください。

(1) 構文

**ユーザー選択:**なし | テキスト | すべて | 要素

**デフォルト値: **テキスト

適用範囲：置換要素を除くすべての要素

(2) 値の説明

none：テキストは選択できません

text：テキストは選択できます

# all：コンテンツ全体をすべて選択した場合に選択できます。子要素をダブルクリックするか、コンテキストに応じてクリックすると、選択した部分がその子要素から遡った最上位の祖先要素になります。

要素: テキストは選択できますが、選択範囲は要素境界によって制限されます

(3) 説明

1.IE6-9 はこの属性をサポートしていません。ただし、user-select:none の効果を達成するために、ラベル属性 onselectstart="return false;" の使用をサポートしています。Safari と Chrome もこのラベル属性をサポートしています。

2。この属性は、Opera12 まではまだサポートされていません。 .5 ですが、IE6-9 と互換性があります。同様に、user-select:none の効果を達成するためのプライベートラベル属性 unselectable="on" の使用もサポートしています; unselectable の他の値は off;

3. Chrome と *Safari に加えて、他のブラウザーでもブラウザーでテキストが -ms-user-select:none; に設定されている場合、ユーザーはそのテキストブロック内のテキストの選択を開始できません。ただし、ユーザーがページの別の領域でテキストの選択を開始した場合でも、テキストを -ms-user-select:none; *;

4 に設定することで、その領域のテキストの選択を続けることができます。対応するスクリプトプロパティは userSelect

(4) です。例

css コード:

.box{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

ログイン後にコピー

html コード:

<div class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</div>

ログイン後にコピー

Effect:

HTMLでテキストの選択を解除する方法

推奨学習:

html ビデオチュートリアル

以上がHTMLでテキストの選択を解除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。