老生常谈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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
filemanage功能中用到的lib.js
Apr 08 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
javascript截取字符串小结
Apr 28 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
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
初探PHP5
2006/10/09 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
表单提交验证类
2006/07/14 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
使用python turtle画高达
2020/01/19 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
电工实训报告总结
2014/11/05 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
教师节随笔
2015/08/15 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP