jQueryでフォーム関係のイベント処理
categories: javascript
前回からちょっと時間があいたけど、今日はフォーム関係のイベントをやってみる。ベースのHTMLはこんな感じ。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.4.4.js"></script> <title>jQuery form events</title> </head> <body> <form id="form" action="#"> <dl> <dt><label for="name">名前</label></dt> <dd><input type="text" name="name" id="name" /></dd> </dl> <input type="submit" /> </form> </body> </html>
フォーカスイン
id=”name”にフォーカスが当たったら背景色を水色にする。
$('#name').focus(function () {
$(this).css('background-color', 'aqua');
});
document.getElementById('name').addEventListener('focus', function () {
this.style.backgroundColor = 'aqua';
}, false);
今回は this を使って前回よりもコードをすっきりさせてみた。
フォーカスアウト
id=”name”からフォーカスが外れたら背景色を黒にする。
$('#name').blur(function () {
$(this).css('background-color', 'black');
});
document.getElementById('name').addEventListener('blur', function () {
this.style.backgroundColor = 'black';
}, false);
変更検知
id=”name”の値が変更されたらダイアログでその値を表示する。
$('#name').change(function () {
alert($(this).val());
});
document.getElementById('name').addEventListener('change', function () {
alert(this.value);
}, false);
サブミット
送信ボタンが押されたらが「名前」に入力された値をダイアログに表示する。
$('#form').submit(function () {
alert($('#name').val());
});
document.getElementById('form').addEventListener('submit', function () {
alert(document.getElementById('name').value);
}, false);
次回はエフェクト関係をやりたいと思う。
2011/01/28 11:12 | 1 Comment
Comments
Trackbacks
[…] 前回に続いて、今回はエフェクトをやってみる。そろそろCSS / JavaScriptで同等コードを書くのが面倒になってくるのでjQueryのみで行きます。ベースのHTML / CSSはこんな感じ。 […]
Trackback URL