ホームページ > 記事 > ウェブフロントエンド > CSSで記事内容のコピーを禁止する方法
CSSで記事内容のコピーを禁止する方法
- 青灯夜游オリジナル
- 2022-08-12 18:22:313503ブラウズ
CSS では、user-select 属性を使用して、テキスト要素に「user-select:none;」スタイルを追加するだけで、記事内容のコピーを禁止する効果を得ることができます。 user-select 属性は、ユーザーがテキストを選択できるかどうかを設定または取得するために使用されます。この属性の値が "none" に設定されている場合、テキスト要素はマウスで選択できず、テキストのコピーが防止されます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
通常、Web ページ上のコピー可能なテキストには、次の I 型のカーソルが表示されます。
必要に応じて、テキストをコピーするには、CSS を設定します。ユーザー選択により目的を達成できます。
user-select 属性は、ユーザーがテキストを選択できるかどうかを設定または取得します。 user-select のデフォルト値は text で、テキストを選択できます。
Web ブラウザでテキストをダブルクリックすると、テキストが選択されるか強調表示されます。このプロパティは、この動作を防止するために使用されます。
構文:
user-select: auto|none|text|all;
| 値 | 説明 |
|---|---|
| auto## ＃＃＃＃デフォルト。ブラウザで許可されている場合はテキストを選択できます。 | #none |
| #text | |
| すべて | |
| 「 |
user-select 属性は CSS3 仕様の新しい機能であり、互換性の問題があるため、ブラウザごとにプレフィックスを付ける必要があります。 テキストのコピーは書き込まれません:
-moz-user-select:none; /* Firefox私有属性 */ -webkit-user-select:none; /* WebKit内核私有属性 */ -ms-user-select:none; /* IE私有属性(IE10及以后) */ -khtml-user-select:none; /* KHTML内核私有属性 */ -o-user-select:none; /* Opera私有属性 */ user-select:none; /* CSS3属性 */
効果 (現在の矢印カーソル):
例: テキストの選択を禁止、テキストのコピーを禁止する機能を実装 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>
.test{
padding:10px;
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
background:#eee;}
</style>
</head>
<body>
<div onselectstart="return false;" unselectable="on">选择我试试，你会发现怎么也选择不到我，哈哈哈哈</div>
</body>
</html>(学習ビデオ共有:
cssビデオチュートリアル
)
以上がCSSで記事内容のコピーを禁止する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。