获得焦点与失去焦点事件

获得焦点与失去焦点事件一介绍获得焦点事件(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)
blank

相关推荐

  • STM32+MFRC522完成IC卡号读取、密码修改、数据读写

    一、环境介绍MCU:STM32F103ZET6开发软件:Keil5非接触式读写卡模块:MFRC522完整工程源码下载:https://download.csdn.net/download/xiaolong1126626497/18905806二、功能介绍使用MFRC522模块完成对IC卡卡号读取、卡类型区分、IC卡扇区密码修改、扇区数据读写等功能;底层采用SPI模拟时序,可以很方便的移植到其他设备,完成项目开发。现在很多嵌入式方向的毕业设计经常使用到该模块,比如:校园…

  • 常用EXCEL宏FUNCTION 2020.11.20「建议收藏」

    常用EXCEL宏FUNCTION 2020.11.20「建议收藏」Functionwalkthrough(path)’遍历文件(文件夹路径)Dimxlsxls=Dir(path&”\*.xls”)’指定要遍历excel文件的路径及文件类型DoWhilexls<>””Call**copythefile(xls)**’要执行的程序xls=Dir’下一个excel文件LoopSetxls=Nothing’释放变量内存

  • android开发之应用Crash自动抓取Log_自动保存崩溃日志到本地

    教你如何抓取应用崩溃日志,保存到本地,或者增加一些友好提示,如果有需要还可以上传到服务器。

  • 背包九讲——完全背包

    背包九讲——完全背包完全背包是01背包的加强版,先来看看《背包问题九讲》里是怎么描述这个问题的:题目有N种物品和一个容量为V的背包,每种物品都有无限件可用。第i种物品的费用是c[i],价值是w[i]。求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大。所属专栏:戳我访问再来看看《背包问题九讲》是怎么解决这个问题的:基本思路这个问题非常类似于01背包问题,所不同

  • 史上最全设计模式导学目录(完整版)

    史上最全设计模式导学目录(完整版)圣诞献礼!2012年-2013年,Sunny在CSDN技术博客中陆续发表了100多篇与设计模式相关的文章,涵盖了七个面向对象设计原则和24个设计模式(23个GoF设计模式+简单工厂模式),为了方便大家学习,现将所有与设计模式学习相关文章的链接进行了整理,希望能给各位带来帮助!

  • lxml基本用法_XML是什么

    lxml基本用法_XML是什么lxml库结合libxml2快速强大的特性,使用xpath语法来进行文件格式解析,与Beautiful相比,效率更高。0x01安装可以利用pip安装lxml:pipinstalllxml在windows系统中安装时,可能会出现如下错误:提示如下:error:MicrosoftVisualC++9.0isrequired(Unabletofin…

    2022年10月30日

发表回复

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

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