老生常谈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中的Screen屏幕对象
Jan 16 Javascript
ext 代码生成器
Aug 07 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
微信小程序实现左右列表联动
May 19 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php判断电子邮件是否正确方法
2018/12/04 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
koa源码中promise的解读
2018/11/13 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
医学生求职信
2014/07/01 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
员工升职自荐信
2015/03/27 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android