当前位置:
文档之家› JavaScript程序设计(第2版)04.表单相关事件
JavaScript程序设计(第2版)04.表单相关事件
</script> 运行结果如图6-19所示。
图6-19 用下拉列表框改变字体颜色
失去焦点修改事件
失去焦点修改事件(onchange)是当前元素失去焦点并且元素的内容发生改变时触发事件处理 程序。该事件一般在下拉文本框中使用。
例6-11 下面的实例是在用户选择下拉文本框中的颜色时,通过onchange事件来相应的改变 文本框的字体颜色。程序代码如下。
<form name="form1" method="post" action=""> <input name="textfield" type="text" value="JavaScript视频讲座"> <select name="menu1" onChange="Fcolor()"> <option value="black">黑</option> <option value="yellow">黄</option> <option value="blue">蓝</option> <option value="green">绿</option> <option value="red">红</option> <option value="purple">紫</option> </select>
} function txtblur(event){
//当前元素失去焦点
var e=window.event;
var obj=e.srcElement;
ห้องสมุดไป่ตู้
obj.style.background="#FFFFFF";
}
//-->
</script>
结果如图6-18所示。
图6-18 文本框获得焦点时改变背景颜色
</td>
</tr>
</table>
<script language="javascript">
<!-function txtfocus(event){
//当前元素获得焦点
var e=window.event; var obj=e.srcElement;
//用于获取当前对象的名称
obj.style.background="#ccffff";
</form> <script language="javascript"> <!-function Fcolor(){
var e=window.event; var obj=e.srcElement; form1.textfield.style.color=obj.options[obj.selectedIndex].value; } //-->
<table align="center" width="600" height="200" border="0">
<tr>
<td> 用户名:<input type="text" name="user" onfocus="txtfocus()" onBlur="txtblur()"> 密码:<input type="password" name="pwd" onfocus="txtfocus()" onBlur="txtblur()">
表单相关事件
本讲大纲:
1、获得焦点与失去焦点事件 2、失去焦点修改事件 3、表单提交与重置事件
获得焦点与失去焦点事件
获得焦点事件(onfocus)是当某个元素获得焦点时触发事件处理程序。失去焦点事件(onblur )是当前元素失去焦点时触发事件处理程序。在一般情况下,这两个事件是同时使用的。
例6-10 下面的实例是在用户选择页面中的文本框时,改变文本框的背景颜色为淡蓝色,当选择其 他文本框时,将失去焦点的文本框背景颜色恢复原始状态。程序代码如下。