获得焦点与失去焦点事件

获得焦点与失去焦点事件一介绍获得焦点事件(onfocus)是当某个元素获得焦点时触发事件处理程序。失去焦点事件(onblur)是当前元素失去焦点时触发事件处理程序。一般情况下,这两个事件是同时使用的。 二应用文本框获得焦点时改变背景颜色本示例是在用户选择页面中的文本框时,改变文本框的背景颜色,当选择其他文本框时,将失去焦点的文本框背景颜色恢复原始状态。 三代码

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

一 介绍
获得焦点事件(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
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 【Java面试】第二章:P5级面试

    HashMap底层原理,扩容机制,jdk8以后会使用红黑树优化?红黑树和二叉平衡树的区别,红黑树和B树,B+树的区别,Mysql二大引擎索引底层实现,HashMap在多线程环境中为何出错?ConcurrentHashMap底层实现,CAS,原子引用,ABA问题,volatile,如何解决HashMap出现的OOM问题?(WeakHashMap)HashMap是Map的一个实现类,它是以键值对存储数据的,Key-Value都是Map.Entry中的属性。当我们向HashMap中存放一个元素(k1,v1)

  • axios的post请求参数格式

    axios的post请求参数格式axios的post请求参数格式默认格式Content-Type:application/json;charset=UTF-8 axios({method:’post’,url:”,data:{ param1:”, param2:” }}}).the…

  • [歪谈]物质激励假设无论用了,最好还是试一试精神管理[通俗易懂]

    [歪谈]物质激励假设无论用了,最好还是试一试精神管理

  • Java工程师定位「建议收藏」

    Java工程师定位「建议收藏」Java工程师定位

  • python精彩编程200例-Python创意编程200例turtle篇[通俗易懂]

    简介:Python是一种高阶计算机语言。它更接近自然语言,学习成本低,开发效率高。如今越来越多的中小学生都在开始学习Python了。我们可以预见,全民会Python的日子不久就会到来,各行各业的人未来都能用Python解决各自领域的问题或创造出独特魅力的作品。在Python的普及过程中,海龟模块(turtle)将会功不可没。它来源于上个世纪60年代的logo计算机语言,就是通过指挥一只小海龟移动…

  • Lwip的udp编程

    Lwip的udp编程这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Ma…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号