老生常谈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实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
javascript动态加载二
Aug 22 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
php取出数组单个值的方法
2018/03/12 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
tensorflow 环境变量设置方式
2020/02/06 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
高中家长寄语
2014/04/02 职场文书
大二学习计划书范文
2014/04/27 职场文书
关于爱国的标语
2014/06/24 职场文书
社团活动总结怎么写
2014/06/30 职场文书
重阳节活动总结
2014/08/27 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
员工教育培训协议书
2014/09/27 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python