フォームで「パスワード（確認用）」をコピペ不可に…

解決済

質問者：goo_mygwdisk_1
質問日時：2012/01/11 07:11
回答数：1件

メールフォームで、
「パスワード」と「パスワード（確認用）」の２つがあることがよくありますが、
サイトによっては、「パスワード（確認用）」のところでコピペをしようとしてもできないようにしているケースがありますよね。
これはどうやって実現しているのでしょうか？

以上、よろしくお願い申し上げます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： LancerVII
回答日時：2012/01/11 08:55

こんにちは。

方法はいろいろあると思いますがJQueryというライブラリを利用すれば簡単に実現できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>フォームで「パスワード（確認用）」をコピペ不可に…</title>
<style type="text/css">
#errmsg {
position:relative;
top:-25px;
left:90px;
display:none;
width:200px;
border:solid 1px #f00;
color:#f00;
background-color:#ffc;
font-size:80%;
padding:5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script type="text/javascript">
$().ready ( function () {
// ID:pass2のペーストイベントにバインド
$('#pass2').bind('paste', function (e) {
// イベントを止める(ココではペースト)
e.preventDefault();
// ここはメッセージ表示なので直接関係ありません
$('#errmsg').html ( "貼り付けは使用しないで下さい" );
$('#errmsg').fadeIn('slow',function() { $('#errmsg').fadeOut('slow')});
});
});
</script>
</head>
<body>
<form id="frm-test">
貼り付け可能:<input type="password" name="pass1" id="pass1" /><br />
貼り付け不可:<input type="password" name="pass2" id="pass2" /><div id="errmsg"></div>
</form>
</body>
</html>