会員登録などの入力フォームでメールアドレスの登録ミスをしないように
メールアドレスの入力欄を入力用、確認用と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で入力フォームのコピー&ペーストを制御する際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで入力フォームのコピー&ペーストを禁止する

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
Partner