JavaScriptでコピー&ペーストを禁止する方法を解説！

お問い合わせや会員登録などの入力フォームなどで、メールアドレスやパスワードをあえてコピー&ペーストを禁止させたいということがあります。

その方法についてJavaScriptを用いて解説します。

JavaScriptでコピー&ペーストを禁止する方法について、コピー禁止、ペースト禁止、右クリックメニューを出したときのコピー禁止と分けてそれぞれ解説します。

コピー禁止させるには、oncopyイベントハンドラを用います。

では実際にサンプルコードを用いて挙動を見てみましょう。

このように一つ目の入力フォームに何か記入してコピーしてみて、2つ目の記入フォームに入力しようとすると出来ないです。

ではサンプルコードの解説を行います。

まずコピー禁止させたい要素をJavaScriptで取得し、それに対してoncopyイベントを用いて、返り値をfalseとします。

これでコピー禁止とすることができます。

oncopyは属性としてHTMLにも設定することができます。

ではサンプルコードを用いて挙動を見てみましょう。

このように同じくコピー禁止となっていることが分かります。

ではサンプルコードの解説を行います。

コピー禁止としたい箇所にoncopy="return false"を設定します。
これだけでコピー禁止にすることができます。

ここではコピーだけでなく、ペーストも禁止にさせます。

ペーストを禁止させるには、onpasteイベントハンドラを用います。

ではサンプルコードを用いて挙動を見てみましょう。

このように2つの入力フォームどちらもコピペが禁止になっています。

ではサンプルコードの解説を行います。

コピペ禁止のコードに加えて、ペースト禁止としたい要素にonpasteイベントを用いて、return falseとします。

これだけで、コピーに加えて、ペーストも禁止にすることができます。

HTMLのみでコピペ禁止にすることができるので、その方法を紹介します。

ではサンプルコードを用いて挙動を見てみましょう。

このように同様にコピペできないことが分かります。

ではサンプルコードの解説を行います。

コピペ禁止にしたい箇所にコピー禁止のHTMLコードに加えて、onpaste="return false"を設定します。

これだけでコピペ禁止となります。

これまでの方法だと右クリックでメニューを出すと、できないのにもかかわらずコピーや貼り付けといったメニューが選択可能でした。

ここではその右クリックしたときにメニューを表示されなくする方法について解説します。

ではサンプルコードを用いて挙動を見てみましょう。

このように入力フォームでは右クリックしてもメニューが表示されないことが分かります。

ではサンプルコードの解説を行います。

まずこれまでと同様にJavaScriptでメニューを表示させたくない要素を取得します。

そしてその要素に対して、oncontextmenuイベントを用いて、return falseとします。

以上です。

こちらもHTMLのみで設定することができるので、その方法について紹介します。

ではサンプルコードを用いて挙動を見てみましょう。

このように入力フォームでは右クリックをしてもメニューが表示されないことがわかります。

ではサンプルコードの解説を行います。

右クリックしてもメニューを表示させたくない要素に対して、oncontextmenu="return false"を設定します。

これだけで、メニュー表示できなくなります。

いかがでしたでしょうか？

こちらで紹介した方法はよく入力フォームで用いられています。

ぜひ試してみてください。