人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascript でテキスト入力中にすぐメッセージを出してきているものがあります。下記のような例です。
input タグの中にイベントハンドラがないようなのですが、どのようにやっているのでしょうか?
http://livevalidationphp.leihitu.nl/index.php?page=home

同様のことを行っている簡潔なサンプルコードがあったらお願いします。

●質問者: isogaya
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript イベントハンドラ コード タグ テキスト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Yuhto
●35ポイント

HTMLを覗いたところ、

<form name='frmTestLive' id='frmTestLive' action='' method='post'>
<input type='hidden' name='action' value='send_test_form'>
I dare you to say "hello"<br>

<p>
<input type='text' id='test_hello' name='test_hello' value=''> <input type='submit' value='press me'>
</p>

</form>

<script>
var lvphp_bce5e3bb3f6c53554edc413fa24dff68 = new LiveValidation( "test_hello", { validMessage:"Ait you go girl!" } );
lvphp_bce5e3bb3f6c53554edc413fa24dff68.add( Validate.Presence);
lvphp_bce5e3bb3f6c53554edc413fa24dff68.add( Validate.Format, { pattern:/^hello$/i,failureMessage:"Chicken!That was not a hello" } );

var lvphp_frm_8069e461c971e06f812f0a9a6c28aa77 = document.getElementById( "frmTestLive" );
lvphp_frm_8069e461c971e06f812f0a9a6c28aa77.onsubmit = function(e){
var result_frmTestLive=LiveValidation.massValidate([lvphp_bce5e3bb3f6c53554edc413fa24dff68]);
return result_frmTestLive;
};
</script>

となっており、HTML出力直後に、

該当する入力域のtest_helloという識別子が、new LiveValidationという、コンストラクタに該当エレメント名がわたされています。

そこで、参照されている、

http://livevalidationphp.leihitu.nl/assets/scripts/livevalidatio...

を見ると、該当エレメントのonkeyupイベントなどにチェックを実行する関数が割り当てられているようです。

参考としては、以下のURLが読みやすいかもしれません。

http://www.microsoft.com/protect/yourself/password/checker.mspx

このJS手法を外部化(JSファイル)にして汎用性をもたせたのが、

該当URLの

http://livevalidationphp.leihitu.nl/index.php?page=home

のような手法といえるかと思います。

◎質問者からの返答

ありがとうございます。マイクロソフトの方がonKeyUpをいれているのでわかりやすいですね。

ありがとうございます。


2 ● cuspos
●35ポイント

こんにちは。

http://blog.g-up.com/hidenori_goto/?s=2&b=10146

にサンプルがあります。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ