よくある会員登録フォームなどで、メールアドレスのコピペ入力を禁止しているサイトがあります。
あれを、個人サイトでもチョロっとやってみようというのが、このページのネタです。
入力フォームにコピペ入力できない場合、ほとんどログイン資格情報(ユーザー名またはパスワード)にかかわりがあります。
意地悪でそうしているわけでなく、あくまでユーザーに警告を促しているというように、好意的にとらえてみてください。
【コピペ入力禁止】具体的なやり方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>
小まとめ
コピペ入力禁止は、メールアドレス入力の再確認などによく使われています。
あくまで、機械的にコピペして間違いに気づかないユーザーへの注意を喚起するために行うのであって、いたずらや嫌がらせではありまません。
コピペ入力禁止は、ユーザー側からすれば迷惑千万なものなので、できれば多用しないようにしてください。