序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさまざまな方法を用意したいと考えました。たとえば、コードブロックはクリックひとつでコピーできるようにして、ローカルでのデバッグが簡単にできるようにしたいです。テキストの説明部分については、コピーできないようにしたいと思っています。 JS よりも CSS を使うべきだと信じる頑固な過激派として、私は最終的に CSS3 で user-select を見つけました。 互換性ユーザー選択ユーザーがテキストを選択できるかどうかを制御するために使用されます。すべて選択、一部選択。 すべて選択多くの場合、ユーザーは、コードの一部、パスワード、またはいくつかのキーなどのコンテンツ全体を一度にコピーしたい場合があります。 h2 { ユーザー選択: すべて; } コード { ユーザー選択: すべて; 幅: 500ピクセル; 表示: ブロック; パディング: 10px; 色: #31808c; 背景色: #f5f4ef; } div { ユーザー選択: すべて; } <h2>クリックして試す</h2> <前> <コード> 定数num = 1; const 結果 = (関数 () { 番号を削除します。 数値を返します。 })(); console.log(結果); </code> </pre> <p> const num = 1; const result = (function () { delete num; return num; })(); console.log(結果); </p> しかし、all には残念な欠点もあります。all を設定すると、一部のコンテンツを選択できなくなります。 選択を無効にするWeb ページ上の要素の場合、user-select: none; を使用して、ユーザーがコンテンツを選択できないようにすることができます。 部分的に選択なぜこのようなことわざがあるのでしょうか? 通常の Web ページの場合、特定のコンテンツを選択できます。たとえば、次のページでは、コンテンツを部分的に選択できます。 しかし、ここでのタイトル部分は主に反対側では選択できない要素を指します。たとえば、HTML には sup というタグがあり、これは主に要素に上付き文字を追加するために使用されます。 <p>私の後ろにはコーナーマークがあります<sup>1</sup>私の前にはコーナーマークがあります</p> このテキストをコピーする場合: 後ろにコーナー マーク 1 があり、前にもコーナー マークがあります。このコーナー マークもコピーされます。 すする { -webkit-user-select: なし; ユーザー選択: なし; } 拡張機能: 選択したスタイルを設定するCSS は、テキスト選択のスタイルを設定するための ::selection 疑似要素を提供します。::selection 疑似要素をターゲットにすることで、テキスト選択のスタイルを設定できます。ただし、設定できるのは次のプロパティのみです。
例えば p::選択{ 色: #fffaa5; 背景色: #f38630; テキストシャドウ: 2px 2px #31808c; } 選択後の効果は以下のとおりです。 これで、純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーできないようにする方法についての記事は終了です。CSS を使用してユーザーがコンテンツをコピーできないようにする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: MySQL のタイムスタンプと日付時刻のタイムゾーンの問題によって生じる DTS の落とし穴の詳細な説明
1. チェックステータスモジュールがインストールされているかどうかを確認します。 [root@loc...
目次環境設定の概要1.K8Sとは何ですか? 2. K8S を使用する理由3. K8S を使用する利点...
目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...
UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...
仮想ホストは、インターネット上で実行されているサーバー ホストを複数の「仮想」ホストに分割する特殊な...
シナリオ 1: サーバーの制限により、外部に開かれているポートは 1 つだけですが、別の外部ネットワ...
目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...
導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...
Centos6.4 で mysql5.7.18 をインストールするための具体的な手順が全員に共有され...
「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...
目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...
文法規則 列名を選択 テーブル名1から INNER JOIN テーブル名2 ON テーブル名1.列名...
目的: 1. Alibaba Cloud Serverを介してサーバーの外部ネットワークをマッピング...
目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...
構造関連タグ--------------------------------------------...