jQuery を使ったテキストのコピー防止 JavaScript, CSS

2013.07.25

昔、unselectable なんて属性があった気がしましたが、使えなかったので、今風のコピー防止対処の仕方はどうなのか調べてみました。

コピーイベントを無効化 ：コピーショートカットキーが押下されたら return false を返し無効化する。

$('.prevent-copy').on('copy', function() {
    return false;
});

コンテキストメニューを無効化 ： Windows だとマウスの右クリックで出現するコンテキストメニューを return false を返し無効化する。

$('.prevent-copy').on('contextmenu', function() {
    return false;
});

貼り付けイベント無効化 ：コピー不可能なエリアというと、大体は書き換え不可能な readonly な箇所だと思うので、ペーストイベントも殺しておく。

$('.prevent-copy').on('paste', function() {
    return false;
});

テキスト選択を無効化（CSS） ：最後に CSS レベルでテキスト選択を無効化する。

.prevent-copy {
    -webkit-user-select: none;
    user-select: none;
}

まとめるとこんな感じ

// コピー防止
$('.prevent-copy')
    .css('user-select', 'none')
    .on('copy paste contextmenu', false);

デモ

因みに jQuery の公式ドキュメントにも記載されていますが、以下のイベント無効化は同義です。

// 通常版
$(selector).on('eventType', function() {
    return false 
});

// 短縮版
$(selector).on('eventType', false);

上記のようにコールバック引数の function () { return false } は false に置き換えられます。

をぶろぐ