zl程序教程

您现在的位置是:首页 >  其他

当前栏目

获得焦点与失去焦点事件

事件 获得 焦点 失去
2023-06-13 09:12:09 时间

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

一 介绍

获得焦点事件(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>

四 运行结果

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148387.html原文链接:https://javaforall.cn