老生常谈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 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
vue3.0 上手体验
Sep 21 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 程序员也要学会使用“异常”
2009/06/16 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
原生js实现日历效果
2020/03/02 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
python绘制雪景图
2019/12/16 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
土木工程应届生自荐信
2013/09/24 职场文书
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
元旦趣味活动方案
2014/08/22 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书