勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/04/17  JavaScript CSS

あるサイトで文言の意味が分からず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>

 - JavaScript CSS

  関連記事

IE11でSB Admin2のログインページの表示がおかしい
IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...

CSSで親子関連のセレクターをネスト(入れ子)で指定する方法
CSSで親子関連のセレクターをネスト(入れ子)で指定する方法

CSSで親子関連のセレクターを指定する場合「.parent .child{}」の ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法

サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...