[js]コンテンツのコピーとペースト禁止（jQueryとVanilla JSとの比較）

HOME > JavaScriptの復習（トップ） > [js]コンテンツのコピーとペースト禁止（jQueryとVanilla JSとの比較）

JavaScriptを使って、ブラウザ画面上のコンテンツのコピーとペーストを禁止します

ブラウザ画面上でcopyイベント、pasteイベントが発生したとき、oncopy、onpasteの各プロパティに対するイベントハンドラで禁止の処理をおこないます。JavaScriptがオフになっている場合は効果がありません。
なお、【sample1】、【sample2】、【sample5】、【sample6】はdiv要素、【sample3】、【sample4】、【sample7】、【sample8】はinput要素です。

● (1) jQueryでコンテンツのコピーとペースト禁止

【sample1】

【sample1】ここのテキストはコピーできません。

【sample2】

【sample2】ここのテキストはコピーできません。コピー操作をするとアラートが出ます。

【sample3】

【sample4】

(1)の各sampleのスクリプト

$(window).on('load', function() {
  $('#sample1').on('copy', function() {
    return false;
  });
  $('#sample2').on('copy', function() {
    alert('コピーはできません！');
    return false;
  });
  $('#sample3').on('paste', function() {
    return false;
  });
  $('#sample4').on('paste', function() {
    alert('ペーストはできません！');
    return false;
  });
});

● (2) Vanilla JS（素のJavaScript）でコンテンツのコピーとペースト禁止

【sample5】

【sample5】ここのテキストはコピーできません。

【sample6】

【sample6】ここのテキストはコピーできません。コピー操作をするとアラートが出ます。

【sample7】

【sample8】

(2)の各sampleのスクリプト

window.onload = function() {
  document.getElementById('sample5').oncopy = function() {
    return false;
  };
  document.getElementById('sample6').oncopy = function() {
    alert('コピーはできません！');
    return false;
  };
  document.getElementById('sample7').onpaste = function() {
    return false;
  };
  document.getElementById('sample8').onpaste = function() {
    alert('ペーストはできません！');
    return false;
  };
};