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)にも同様の処理をしています。
動作確認
実際に動作を確認すると、テキストボックスとテキストエリアで、コピーやペーストができないことが確認できました。
また、イベントが発生しているのでコンソールにメッセージが表示されています。
ページ全体のコピペを禁止する
ページ全体でコピペを禁止するサンプルコードです。
<!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でコピペを禁止する処理を書いてみました。
それぞれの要素にcopy・pasteイベントを追加して、「event.preventDefault()」を処理時に呼び出すことで
コピーとペーストを禁止することができました。
また、documentに対して処理することで、ページ全体でコピペを禁止することができました。
コメント