老生常谈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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
js取模(求余数)隔行变色
May 15 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
canvas 中如何实现物体的框选
Aug 05 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
php fread函数使用方法总结
2019/05/28 PHP
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
python字典操作实例详解
2017/11/16 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python圣诞树编写实例详解
2020/02/13 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
教师党员个人总结
2015/02/10 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js