form部品のイベント

ほとんどのform部品は、以下のイベントメソッドを使う事ができる。

text1とtext2間を移動してみて下さい

text1: text2:
記事へ戻る --- 愚鈍人ホーム
JavaScriptの参考書 ／  Ajaxの参考書 ／  HTMLの参考書 ／  CSSの参考書

 

htmlソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form部品のイベント</title>
<link href="/gudon/css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>form部品のイベント</h1>
<hr />
<p>ほとんどのform部品は、以下のイベントメソッドを使う事ができる。</p>
<ul>
	<li>onclick<br />クリックされた。</li>
	<li>onchange<br />値が変化した。</li>
	<li>onfocus<br />focusを受け取った。</li>
	<li>onblur<br />focusを失った。</li>
</ul>
<p>text1とtext2間を移動してみて下さい</p>
<form>
	text1:<input type="text" name="text1"
		onclick="disp(this.name,'onclick');"
		onchange="disp(this.name,'onchange');"
		onfocus="disp(this.name,'onfocus');"
		onblur="disp(this.name,'onblur');"
		/>
	text2:<input type="text" name="text2"
		onclick="disp(this.name,'onclick');"
		onchange="disp(this.name,'onchange');"
		onfocus="disp(this.name,'onfocus');"
		onblur="disp(this.name,'onblur');"
		/>
	<input type="button" value="clear"
		onclick="document.getElementById('msg').innerHTML = ''"/>
</form>
<div id="msg"></div>
<script type="text/javascript">
	var logMsg="";
	function disp(name, msg){
		document.getElementById("msg").innerHTML +=
			(name+":"+msg+"<br />");
	}
</script>
</body>
</html>