JavaScriptでコピペを禁止する方法！

JavaScriptでコピペを禁止する方法について書いています。
copyイベントとpasteイベントを使うことで、コピーもペーストも禁止することが可能です。

テキストボックス・テキストエリアのコピペを禁止する

テキストボックスとテキストエリアに対して、コピペを無効にする方法を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>コピペ禁止</title>
</head>
<body>
    <input id="testText" type="text" value="テスト文字列１２３" /><br />
    <textarea id="testTextArea">テスト文字列１２３</textarea>
    <script>
        window.onload = () => {
            const testText = document.querySelector("#testText");
            const testTextArea = document.querySelector("#testTextArea");

            testText.addEventListener('copy', function(event) {
                event.preventDefault();
                console.log("テキストボックスはコピー禁止です");
            });
            testText.addEventListener('paste', function(event) {
                event.preventDefault();
                console.log("テキストボックスはペースト禁止です");
            });

            testTextArea.addEventListener('copy', function(event) {
                event.preventDefault();
                console.log("テキストエリアはコピー禁止です");
            });
            testTextArea.addEventListener('paste', function(event) {
                event.preventDefault();
                console.log("テキストエリアはペースト禁止です");
            });
        }
    </script>
</body>
</html>

HTMLの解説

コピーとペーストを禁止するテキストボックス(#testText)とテキストエリア(#testTextArea)を用意しています。
このふたつの入力エリアに対して、JavaScriptでcopy・pasteイベントを処理してコピペ禁止にします。

JavaScriptの解説

「window.onload」を使って、画面読み込み時に処理を行っています。

最初にテキストボックス(#testText)を取得してtestText変数に入れています。
そして、テキストエリア(#testTextArea)を取得してtestTextArea変数に入れています。

そのあとにそれぞれの要素に対して、イベント時に処理をするようにaddEventListenerメソッドを使ってイベントを追加しています。
最初にテキストボックス(#testText)に対してcopyイベントがおきたとき、次にpasteイベントがおきたときの処理を追加しています。

イベントが起きた時に「event.preventDefault()」の処理をしています。
これで、イベント発生時にブラウザのデフォルト処理を制御します。これによって、コピーとペーストされるのを防いでいます。

テキストエリア(#testTextArea)にも同様の処理をしています。

動作確認

実際に動作を確認すると、テキストボックスとテキストエリアで、コピーやペーストができないことが確認できました。
また、イベントが発生しているのでコンソールにメッセージが表示されています。

JavaScriptで一部のコピペを禁止する

ページ全体のコピペを禁止する

ページ全体でコピペを禁止するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>コピペ禁止</title>
</head>
<body>
    <p>テスト文字列１２３テスト文字列<br />１２３テスト文字列１２３テスト文字列１２３</p>
    <input type="text" value="テスト文字列１２３" /><br />
    <textarea>テスト文字列１２３</textarea>
    <script>
        window.onload = () => {
            document.addEventListener("copy", function (event) {
                event.preventDefault();
                console.log("このページではコピーできません！");
            });

            document.addEventListener("paste", function (event) {
                event.preventDefault();
                console.log("このページではペーストできません！");
            });
        }
    </script>
</body>
</html>

HTMLの解説

コピーやペーストの対象になる要素として、pタグ・inputタグ・textareaタグを用意しています。
それぞれにcopy・pasteイベントをつけるのではなく、ドキュメント全体でコピペを禁止するようにします。

JavaScriptの解説

画面を読み込んだ時に処理しています。(window.onload）
documentに対して、addEventListenerメソッドを使って、copy・pasteイベントを追加しています。

イベントの処理で「event.preventDefault()」とやっています。
これで、ブラウザのデフォルトの処理をキャンセルして、コピーとペーストをできなくしています。

動作確認

実際に動作を確認すると、下記のようにそれぞれの要素でコピー・ペーストができないことが確認できました。
JavaScriptでページ全体のコピペを禁止する

終わりに

今回はJavaScriptでコピペを禁止する処理を書いてみました。

それぞれの要素にcopy・pasteイベントを追加して、「event.preventDefault()」を処理時に呼び出すことで
コピーとペーストを禁止することができました。

また、documentに対して処理することで、ページ全体でコピペを禁止することができました。

コメント