获得焦点与失去焦点事件
事件 获得 焦点 失去
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>
四 运行结果
- 大小: 2.1 KB
- 查看图片附件
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148387.html原文链接:https://javaforall.cn
相关文章
- 失去焦点和获得焦点发生事件(js)
- 8.19VR行业大事件:扎克伯格的最新虚拟化身遭群嘲;联想拯救者VR700首发价2999元
- 开源开放 | 一个融合多元关系和事件表示的金融领域本体模型FTHO(CCKS2021)
- Laravel 事件
- onbeforeunload事件详解编程语言
- Oracle 等待事件 buffer deadlock 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 timer in sksawat 官方解释,作用,如何使用及优化方法
- JS DOMContentLoaded事件:DOM文档结构加载完毕
- 济南华联回应阿里女员工被侵害事件:涉事员工停职调查
- Oracle出现等待事件调查答案(oracle出现等待事件)
- Oracle会话回顾历史事件(oracle会话历史)
- js实现图片预加载(js操作Image对象属性complete,事件onload异步加载图片)
- DOM3中的jstextInput文本事件
- jQuery新的事件绑定机制on()示例应用