CSSとJavaScriptでテキストのコピー防止

2014/09/12

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、テキスト部分が選択できなかった。画像ではなくテキストで書かれているので不思議だったんだけど、調べてみるとCSSとJavaScriptでそのような対策ができるみたい。

<html>
<head>
<style>
body{
	user-select:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-khtml-user-select:none;
	-webkit-user-drag:none;
	-khtml-user-drag:none;
}
</style>
</head>
<body onMouseDown="return false;" onSelectStart="return false">
<div>
	ドラッグ不可能ドラッグ不可能ドラッグ不可能<br />
	ドラッグ不可能ドラッグ不可能ドラッグ不可能<br />
	ドラッグ不可能ドラッグ不可能ドラッグ不可能<br />
	ドラッグ不可能ドラッグ不可能ドラッグ不可能<br />
</div>
</body>
</html>

<html>

<head>

<style>

body{

user-select:none;

-webkit-user-select:none;

-moz-user-select:none;

-khtml-user-select:none;

-webkit-user-drag:none;

-khtml-user-drag:none;

}

</style>

</head>

<div>

ドラッグ不可能ドラッグ不可能ドラッグ不可能<br />

</div>

</body>

</html>

ソース開かれたらそれで終わりではある。

- CSS, JavaScript

: JavaScriptでFlashのバージョンを取得

既存のソースでFlashのバージョン取得を行っているものがあり、使いそうなので ...

: 要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

: JavaScriptでinputタグのtypeを変更

チェックボックスの状態によって inputタグのtypeをtext⇔passwo ...

: GoogleMapで都道府県の中心地と県庁所在地

GoogleMapで都道府県の中心地もしくは県庁所在地にマーカーを立てたかった。 ...

: CSSで1つの要素に複数classを設定して画像を入れ替える

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...

: JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。だいぶ書き換えて ...

: LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

: 時間差をつけて処理する

setTimeout( 処理, タイムアウト時間 ); で、時間差をつけて処理が ...

: CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。リンク時に一律させた方がよいと ...

: 3Dデータ(obj,stlファイル)をブラウザ上で表示する方法

3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...

PREV: Cronと同じく指定期間に指定URLへアクセスしてくれるサイト
NEXT: PHPでサイトURLからtitleとRSS用URLを取得

CSSとJavaScriptでテキストのコピー防止

関連記事