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);

次回はエフェクト関係をやりたいと思う。

tags: ,

Comments

Trackbacks

  • […] 前回に続いて、今回はエフェクトをやってみる。そろそろCSS / JavaScriptで同等コードを書くのが面倒になってくるのでjQueryのみで行きます。ベースのHTML / CSSはこんな感じ。 […]

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です。コメントは承認制です。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Trackback URL