CSSで記事内容のコピーを禁止する方法-フロントエンドQ&A-php.cn

CSSで記事内容のコピーを禁止する方法

青灯夜游

リリース： 2022-08-12 18:22:31

オリジナル

3545 人が閲覧しました

CSS では、user-select 属性を使用して、テキスト要素に「user-select:none;」スタイルを追加するだけで、記事内容のコピーを禁止する効果を得ることができます。 user-select 属性は、ユーザーがテキストを選択できるかどうかを設定または取得するために使用されます。この属性の値が "none" に設定されている場合、テキスト要素はマウスで選択できず、テキストのコピーが防止されます。

CSSで記事内容のコピーを禁止する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

通常、Web ページ上のコピー可能なテキストには、次の I 型のカーソルが表示されます。

CSSで記事内容のコピーを禁止する方法

必要に応じて、テキストをコピーするには、CSS を設定します。ユーザー選択により目的を達成できます。

user-select 属性は、ユーザーがテキストを選択できるかどうかを設定または取得します。 user-select のデフォルト値は text で、テキストを選択できます。

Web ブラウザでテキストをダブルクリックすると、テキストが選択されるか強調表示されます。このプロパティは、この動作を防止するために使用されます。

構文:

user-select: auto|none|text|all;

ログイン後にコピー

#noneテキストの選択を禁止します。テキストはユーザーが選択できます。ダブルクリックする代わりにクリックしてテキストを選択します。「user-select:none;」スタイルをテキスト要素に追加するだけで、テキスト要素が選択できないようになります。コピーを禁止するマウス、テキスト効果。

値	説明
auto## ＃＃＃＃デフォルト。ブラウザで許可されている場合はテキストを選択できます。
	#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属性 */

ログイン後にコピー

効果 (現在の矢印カーソル):

例: テキストの選択を禁止、テキストのコピーを禁止する機能を実装 CSSで記事内容のコピーを禁止する方法

<!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で記事内容のコピーを禁止する方法 )