老生常谈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 eval函数深入认识
Feb 21 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
jQuery实现验证码功能
Mar 17 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
详解Vue爬坑之vuex初识
Jun 14 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/06/01 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
js实现缓动动画
2020/11/25 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python打开文件的方式有哪些
2020/06/29 Python
python中数字是否为可变类型
2020/07/08 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
模具毕业生推荐信
2014/02/15 职场文书
应届生自荐书
2014/06/23 职场文书
应届生简历自我评价
2015/03/11 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript