ホームページ >ウェブフロントエンド >CSSチュートリアル >透明なオーバーレイ DIV でのテキスト選択を防ぐにはどうすればよいですか?

透明なオーバーレイ DIV でのテキスト選択を防ぐにはどうすればよいですか?

DDD
DDDオリジナル
2024-12-09 18:39:15240ブラウズ

How Can I Prevent Text Selection on a Transparent Overlay DIV?

オーバーレイ テキストで DIV を選択不可にする

特定のシナリオでは、透かしなどの透明な DIV オーバーレイ テキストが誤って選択可能になってしまい、ユーザーの操作を妨げる可能性があります。この問題は、DIV の Z インデックスが低い場合でも発生します。ブラウザはレイヤーではなく表示されているコンテンツに基づいて選択を優先するためです。

DIV を選択できないようにするには、2 つの実行可能な方法があります。

jQuery の使用:

jQuery を使用して選択を無効にするには、次を使用できます。拡張子:

$('.button').disableSelection();

CSS の使用:

または、CSS を使用して、クロスブラウザーで同じ結果を得ることができます:

.button {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

この CSS プロパティを適用すると、指定した DIV に対するユーザー選択が効果的に無効になり、基になるテキストが確実に維持されます。選択できません。

以上が透明なオーバーレイ DIV でのテキスト選択を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。