JavaScript学习（二十一）——表单相关事件（焦点事件）

最新推荐文章于 2024-08-18 18:06:37 发布

空城机

最新推荐文章于 2024-08-18 18:06:37 发布

阅读量2.2k

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/qq_36171287/article/details/86551213

版权

JavaScript 专栏收录该内容

66 篇文章 6 订阅

订阅专栏

表单事件实际上就是对元素获得或失去焦点的动作进行控制。可以利用表单事件来改变获得或失去焦点的元素样式，这里所指的元素可以是同一类型，也可以是多个不同类型的元素。

获取焦点与失去焦点事件

获得焦点事件(onfocus) 是当某个元素获得焦点时触发事件处理程序。失去焦点事件(onblur)是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。

例子：文本框获得焦点时改变背景颜色

在用户选择页面中的文本框时，改变文本框的背景颜色，当选择其他文本框时，将失去焦点的文本框背景颜色恢复原始状态。


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function txtfocus(event){    //当前元素获得焦点
				var e=window.event;
				var obj=e.srcElement;    //用于获取当前对象的名称
				obj.style.background="#FFFF66";
			}
			function txtblur(event){    //当前元素失去焦点
				var e=window.event;
				var obj=e.srcElement;    //用于获取当前对象的名称
				obj.style.background="#FFFFFF";
			}
		</script>
	</head>
	<body >
		<table align="center" width="400px" height="300px" border="1px">
			<tr>
				<td width="100px">user:</td>
				<td><form name="form1" method="post">
					<input type="text" onfocus="txtfocus()" onblur="txtblur()" />
				</form></td>
			</tr>
			<tr>
				<td width="100px">password:</td>
				<td><form name="form2" method="post">
					<input type="text" onfocus="txtfocus()" onblur="txtblur()" />
				</form></td>
			</tr>
			<tr>
				<td width="100px">name:</td>
				<td><form name="form3" method="post">
					<input type="text" onfocus="txtfocus()" onblur="txtblur()" />
				</form></td>
			</tr>
			<tr>
				<td width="100px">sex:</td>
				<td><form name="form4" method="post">
					<input type="text" onfocus="txtfocus()" onblur="txtblur()" />
				</form></td>
			</tr>
		</table>		
	</body>	
</html>

失去焦点修改事件

失去焦点修改事件(onchange)是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉列表框中使用。
例子：用下拉列表框改变字体颜色

在用户选择下拉列表框中的颜色时，通过onchange事件来相应地改变文本框的字体颜色。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function txtfocus(event){    //当前元素获得焦点
				var e=window.event;
				var obj=e.srcElement;    //用于获取当前对象的名称
				obj.style.background="#FFFF66";
			}
			function txtblur(event){    //当前元素失去焦点
				var e=window.event;
				var obj=e.srcElement;    //用于获取当前对象的名称
				obj.style.background="#FFFFFF";
			}
			function color(){
				var e=window.event;
				var obj=e.srcElement;
				form1.field1.style.color=obj.options[obj.selectedIndex].value;
			}
		</script>
	</head>
	<body >
		<table align="center" width="400px" height="300px" border="1px">
			<tr>
				<td width="100px">user:</td>
				<td><form name="form1" method="post">
					<input type="text" onfocus="txtfocus()" onblur="txtblur()" name="field1"/>
				</form></td>
			</tr>
			<tr>
				<td width="100px">password:</td>
				<td><form name="form2" method="post">
					<input type="text" onfocus="txtfocus()" onblur="txtblur()" />
				</form></td>
			</tr>
			<tr>
				<td width="100px">name:</td>
				<td><form name="form3" method="post">
					<input type="text" onfocus="txtfocus()" onblur="txtblur()" />
				</form></td>
			</tr>
			<tr>
				<td width="100px">sex:</td>
				<td><form name="form4" method="post">
					<input type="text" onfocus="txtfocus()" onblur="txtblur()" />
				</form></td>
			</tr>
		</table>
		<div align="center">
			<select name="menu1" onchange="color()">
				<option value="black">黑</option>
				<option value="red">红</option>
				<option value="blue">蓝</option>
				<option value="purple">紫</option>
				<option value="green">绿</option>
				<option value="yellow">黄</option>
			</select>	
		</div>	
	</body>
	
</html>