DIV 要素内のテキスト選択を防ぐにはどうすればよいですか?

DIV 要素内のテキスト選択の防止

特定のシナリオでは、DIV 要素内の特定のテキストがユーザーによって選択できないようにすることが重要になります。たとえば、テキストエリアに重なる大きな半透明のテキストが透かしとして機能する状況に遭遇することがあります。見た目の美しさは心地よいかもしれませんが、このテキストの意図しない選択は障害となる可能性があります。

Z インデックスの無効性

最初は、Z インデックスを操作すると仮定するかもしれません。プロパティを使用すると、この問題が解決されます。透かしテキストに低い Z インデックス値を割り当てると、理論的には、より高い Z インデックスのテキスト領域の下にレンダリングされます。ただし、ブラウザはテキストの選択可能性を決定するときに Z インデックス レイヤーを無視します。

CSS ソリューション

望ましい動作を実現するために、CSS は次のような簡単なソリューションを提供します。

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

この包括的なコードは複数のブラウザに対応しており、クラスを使用して DIV 要素内のテキスト選択を効果的に無効にします。 "watermark."

jQuery 拡張機能

または、jQuery ベースのアプローチを希望する場合は、次の拡張機能の採用を検討してください:

$('.watermark').disableSelection();

この拡張機能は、指定された DIV 要素内での選択を明示的に禁止します。

次のいずれかを実装します。これらのメソッドにより、透かしテキストが選択不可のままになり、ユーザー エクスペリエンスが向上し、不要なテキストの変更が防止されます。

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