jQueryを使って入力フォームのコピペを禁止する方法

jQueryを使って入力フォームのコピペを禁止する方法をご紹介いたします。

例えば、確認用メールアドレスの入力など、コピペできてしまうとその項目の意味がなくなってしまう場合に活用できます。

jQueryを使って入力フォームのコピペを禁止する方法

以下のコードを</body>の直前に記述します。

<script>
$(document).ready(function(){
 $('#mail').on('copy cut paste',function(e){
 e.preventDefault();
 });
});
</script>

“mail”というIDがついているフォームではコピペができなくなります。[Ctrl]+Cや[Ctrl]+V、[Ctrl]+Xだけでなく、右クリックによるコピー&ペーストも使えなくなります。

フォーム側は以下のようにIDを付与してあげます。

<input type="email" name="your-email" value="" size="40" id="mail">

付与するIDの部分は、適宜変更してください。また、要jQueryなので、jQuery本体の読み込みもお忘れなく。

あとがき

先日紹介した確認用メールアドレスの入力フォームを設置した際に、上述した方法を使ってコピペを禁止しました。

利用シーンは限られてくると思いますが、フォームでのコピペを禁止したい場合は参考にしてください。