获得焦点与失去焦点事件

全栈程序员站长

发布于 2022-09-07 15:35:44

6K0

发布于 2022-09-07 15:35:44

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

一介绍

获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。

失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。

一般情况下，这两个事件是同时使用的。

二应用

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

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

三代码

<table align="center" width="337" height="204" border="0">
 <tr>
 <td width="108">用户名:</td>
 <td width="213"><form name="form1" method="post" action="">
 <input type="text" name="textfield" οnfοcus="txtfocus()" onBlur="txtblur()">
 </form></td>
 </tr>
 <tr>
 <td>密码:</td>
 <td><form name="form2" method="post" action="">
 <input type="text" name="textfield2" οnfοcus="txtfocus()" onBlur="txtblur()">
 </form></td>
 </tr>
 <tr>
 <td>真实姓名:</td>
 <td><form name="form3" method="post" action="">
 <input type="text" name="textfield3" οnfοcus="txtfocus()" onBlur="txtblur()">
 </form></td>
 </tr>
 <tr>
 <td>性别:</td>
 <td><form name="form4" method="post" action="">
 <input type="text" name="textfield5" οnfοcus="txtfocus()" onBlur="txtblur()">
 </form></td>
 </tr>
 <tr>
 <td>邮箱:</td>
 <td><form name="form5" method="post" action="">
 <input type="text" name="textfield4" οnfοcus="txtfocus()" onBlur="txtblur()">
 </form></td>
 </tr>
</table>
<script language="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>

四运行结果