老生常谈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 图像裁剪插件Jcrop的简单使用
May 22 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
javascript实现点亮灯泡特效示例
Oct 15 Javascript
vue设置默认首页的操作
Aug 12 Javascript
javascript对象3个属性特征
Nov 17 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 图片上传代码
2011/09/13 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
jquery 操作DOM案例代码分享
2012/04/05 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
Django自定义分页效果
2017/06/27 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python中偏函数用法示例
2018/06/07 Python
python修改txt文件中的某一项方法
2018/12/29 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
群众路线剖析材料
2014/09/30 职场文书
委托书英文
2015/01/28 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android