コード

[JS]HTMLでフォームにコピペ入力をさせない方法

よくある会員登録フォームなどで、メールアドレスのコピペ入力を禁止しているサイトがあります。
あれを、個人サイトでもチョロっとやってみようというのが、このページのネタです。

入力フォームにコピペ入力できない場合、ほとんどログイン資格情報(ユーザー名またはパスワード)にかかわりがあります。
意地悪でそうしているわけでなく、あくまでユーザーに警告を促しているというように、好意的にとらえてみてください。

【コピペ入力禁止】具体的なやり方1

では、どのようにしてコピペを禁止しているのでしょうか?
実は何も難しくありません。
以下のコードで、フォームの入力欄(input)を作ります。

 
<input type="text" onpaste="return false;" ondrop="return false;" autocomplete="off" />

ポイントは、onpaste 属性を使うことです。これで、フォームへの貼り付けはできなくなります。
さらに、autocomplete 属性を追加し、ドラッグアンドドロップも禁止します。

【コピペ入力禁止】具体的なやり方2

これ以外の方法もあります。
on{event} 系の HTML コードを避けたいときは、以下のスクリプトでもできます。

 
要素.addEventListener('paste', e => e.preventDefault());

具体的には次のように使います。

 

<input id="safe" />
<script>safe.addEventListener('paste', e => e.preventDefault());</script>

小まとめ

コピペ入力禁止は、メールアドレス入力の再確認などによく使われています。
あくまで、機械的にコピペして間違いに気づかないユーザーへの注意を喚起するために行うのであって、いたずらや嫌がらせではありまません。

コピペ入力禁止は、ユーザー側からすれば迷惑千万なものなので、できれば多用しないようにしてください。

-コード
-,

© 2020 ネーテルス