老生常谈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 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
在JavaScript中使用timer示例
May 08 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
jQuery实现跨域
Feb 03 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
细说Vue组件的服务器端渲染的过程
May 30 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
js获取url参数的使用扩展实例
2007/12/29 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
layer 关闭指定弹出层的例子
2019/09/25 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
Python爬豆瓣电影实例
2018/02/23 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python 三元运算符使用解析
2019/09/16 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
机关门卫岗位职责
2013/12/30 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
文案策划求职信
2014/04/14 职场文书
先进工作者事迹材料
2014/12/23 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL