会員登録などの入力フォームでメールアドレスの登録ミスをしないように、メールアドレスの入力欄を入力用、確認用と2つ設けて入力をしてもらうことがあり、この2つの入力欄にメールアドレスを正確に入力してもらうために入力フォーム内でのコピー＆ペーストができないようにする仕様がよくあります。
このUIの良し悪しは別として、そのような入力フォーム内でのコピー＆ペーストの制御について、jQueryを使って簡単に実装する方法を紹介します。
jQueryで入力フォームのコピー＆ペーストを禁止する
「jQueryで入力フォームのコピー＆ペーストを禁止する」サンプルを別枠で表示
サンプル画面では2つの入力フォームを設けて、一つ目のフォームで入力したものをコピー及びカットする動作を禁止させ、二つ目のフォームでは入力する際のペースト（貼り付け）の動作を禁止しています。
この入力フォーム制御の全体構成についてまずはHTMLから。
◆HTML <ul> <li>メールアドレス：<input type="email" name="mail1" class="noCopy"></li> <li>メールアドレス（確認用）：<input type="email" name="mail2" class="noPaste"></li> </ul>
特にHTMLで必ず記載しておかないといけないものはないのですが、今回のサンプルではそれぞれ制御する動作を分けているので、入力フォームそれぞれに個別のクラスをつけています。
（クラスの付与は必須ではありません）
今回の動作に関してはCSSで必要な指定はないのでCSSについては割愛します。
この入力フォームに対して実際に入力制御するスクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
$('.noCopy').on('copy cut',function(e){
e.preventDefault();
});
$('.noPaste').on('paste',function(e){
e.preventDefault();
});
});
</script>
フォーム内の入力制御するには「.on()」メソッドを使います。
一つ目の「$(‘.noCopy’)」では、コピーとカットについて制御するので「.on()」メソッドの後のイベント指定を「copy」「cut」としてコピーとカットに対して、実装されたら「e.preventDefault();」にて動作を無効にしています。
二つ目の「$(‘.noPaste’)」では、貼り付けについて制御するので「.on()」メソッドの後のイベント指定を「paste」としてペースト（貼り付け）に対して、同様に実装されたら「e.preventDefault();」にて動作を無効にしています。
このように「.on()」メソッドのイベントを使って、簡単にフォームの入力を制御することができます。
サンプルでは「コピー／カット」と「ペースト」の制御を別クラスで分けて説明しましたが、実際に使用する際には一つの入力フォームに対して「コピー／カット／ペースト」のすべての動作ができないように制御することが多くなると思います。
その場合は下記のように一つにまとめて記載します。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
$('input').on('copy cut paste',function(e){
e.preventDefault();
});
});
</script>
このようにまとめて記載することで、入力フォームに対して「コピー／カット／ペースト」のすべての動作を禁止させることができます。
以上がjQueryを使って入力フォームのコピー＆ペーストを禁止する方法でした。
今回のサンプルではコピーを不可にする要素を＜input＞タグにしましたが、同様の方法でコピーを不可にさせる対象を＜p＞タグや＜div＞タグなどのブロック要素にした場合、その中に記載されたテキスト等をコピーできなくさせることも可能になります。
メールアドレスの登録ミスを防ぐために2度入力させることに関しては、ユーザーの手間なども考慮するとあまりいいUI／UXだとは言えない部分もありますが、このような動作の実装を求められる場面はよくあることかと思います。
jQueryで入力フォームのコピー＆ペーストを制御する際にぜひ。。。