老生常谈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 相关文章推荐
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
大三预备党员入党思想汇报
2014/01/08 职场文书
三爱活动实施方案
2014/03/19 职场文书
颁奖晚会主持词
2014/03/25 职场文书
小学一年级评语大全
2014/04/22 职场文书
淘宝客服工作职责
2014/07/11 职场文书
最美护士演讲稿
2014/08/27 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
售票员岗位职责
2015/02/15 职场文书
党校毕业个人总结
2015/02/28 职场文书
金砖之国观后感
2015/06/11 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书