老生常谈onBlur事件与onfocus事件(js)


Posted in Javascript onJuly 09, 2016

onFocus事件就是当光标落在文本框中时发生的事件。

onBlur事件是光标失去焦点时发生的事件。

可以编如下例子

1.html

<HTML> 
<HEAD> 
<TITLE>使用onBlur事件处理程序</TITLE> 
</HEAD> 
<BODY BGCOLOR="lavender"> 
<FORM name="F1"> 
<INPUT TYPE=text NAME=text1 value="1111ONBLUR_green" ONBLUR="(document.bgColor='green')"> 
<INPUT TYPE=text NAME=text2 value="2222ONBLUR_black" ONBLUR="(document.bgColor='black')"> 
<INPUT TYPE=text NAME=text2 value="3333ONBLUR_yellow" ONBLUR="(document.bgColor='yellow')"> 
<br>
<p>
<INPUT TYPE=text NAME=text3 value="4444onfocus_blue" onfocus="(document.bgColor='blue')"> 
<INPUT TYPE=text NAME=text4 value="5555onfocus_red" onfocus="(document.bgColor='red')">
<INPUT TYPE=text NAME=text4 value="6666onfocus_orange" onfocus="(document.bgColor='orange')">
</FORM> 
</BODY> 
</HTML>

还有以下例子

2.html

<!-- 文件说明:OnFocus事件 -->
 <!-- ------------------------------ -->
 <html>
 <head>
 <title>OnFocus事件</title>
 </head>
 <body>
 <Form>

 <input type="text" name="test1" value="test1" onclick=alert("可以关掉!")> 
 <input type="text" name="test1" value="test1" onblur=alert("可以关掉aaaaaaa!")>

 <input type="text" name="test1" value="test1" onclick=alert("可以关掉bbbbbbbbb!")> 
 <input type="text" name="test2" value="一按我就无法关掉了,haha" onFocus=alert("我成为了输入焦点!")>
 </Form>
 </body>
 </html>

以上这篇老生常谈onBlur事件与onfocus事件(js)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 #Javascript
深入浅析JavaScript中的Function类型
Jul 09 #Javascript
JavaScript基础重点(必看)
Jul 09 #Javascript
jQuery获取同级元素的简单代码
Jul 09 #Javascript
JS添加删除DIV的简单实例
Jul 08 #Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 #Javascript
简单封装js的dom查询实例代码
Jul 08 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
PHP Cookie学习笔记
2016/08/23 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python3+PyQt5使用数据库表视图
2018/04/24 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Django之路由层的实现
2019/09/09 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
施工班组长岗位职责
2014/01/05 职场文书
自荐信需注意事项
2014/01/25 职场文书
委托书格式范文
2015/01/28 职场文书
社区结对共建协议书
2016/03/23 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
js Proxy的原理详解
2021/05/25 Javascript