CSSを使用してテキストが選択されてコピーされないようにするにはどうすればよいですか? (コード例)

フロントエンド開発では、テキストをダブルクリックするとテキストが選択されてしまうことがありますが、これは非常に醜く、まったく美しくなく、非常に不便です。また、一部の Web ページ モジュールでは、テキストが選択されてしまうことがあります。テキストを選択またはコピーできないようにする必要があります。

では、この要件を実現し、テキストが選択されたりコピーされたりしないようにするにはどうすればよいでしょうか?この記事では、CSSで文字を選択してコピーできないようにする方法を紹介します。困っている友人は参考にしていただければ幸いです。

css テキストの選択とコピーを禁止する方法は、実際には user-select 属性を使用して完了することができます。 この物件を見てみましょう。

user-select 属性は CSS3 の新しい属性で、コンテンツの選択可能性を制御したり、ユーザーがテキストを選択できるかどうかを設定または取得したりするために使用でき、置換要素を除くすべての要素に適用されます。

基本構文:

user-select:value;

次の属性値を設定できます:

auto: デフォルト値、 text 選択はブラウザのデフォルト属性に基づいて行われます。

none: を設定すると、ユーザーは要素内で何も選択できなくなります。 text:

設定 ユーザーは要素内のテキストを選択できます。

element:

テキストをオプションに設定しますが、選択範囲は要素の境界 (この属性値) によって制限されます。 IE と FF でのみサポートされています)

all: すべてのコンテンツ全体が選択されている場合に選択できます。子要素でダブルクリックまたはコンテキスト クリックが発生すると、子要素の 1 つ前に遡る最上位の祖先要素が選択されます。簡単に言うと、ターゲット要素は一部ではなく全体として選択されます。ブラウザは要素全体のコンテンツを自動的に選択します。

-moz-none: Firefox のプライベート属性値。要素およびサブ要素のテキストの設定はオプションではありません。ただし、サブ要素はテキストを通じてオプションに再設定できます。

ブラウザのサポート

上の図は、user-select 属性の値が none|text|all の場合を示しています。この場合、属性値が element の場合、ほとんどのブラウザはそれをサポートしていないため、リストには表示されません。

以下では、互換性を考慮して、テキストの選択とコピーを禁止するメソッドを実装する

css user-select 属性を簡単なコード例を使用して紹介します。

テキストの選択を無効にする コード例のコピー:

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>

手順:

IE6-9 は user-select 属性をサポートしていないため、user-select:none を実装する場合、つまりテキストの選択を禁止し、コピーすると、タグ属性 onselectstart="return false;" を使用できます。Safari と Chrome もこのタグ属性をサポートします。

要約:

上記は、この記事で紹介したテキストの選択とコピーを禁止するための CSS 実装の全内容です。ユーザーについての理解を深めるために、実際に試してみてください。属性を選択します。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、

CSS ビデオ チュートリアル

、 HTML ビデオ チュートリアル 、bootstrap ビデオ チュートリアル をご覧ください。

以上がCSSを使用してテキストが選択されてコピーされないようにするにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。