Js中的onblur和onfocus事件应用介绍


Posted in Javascript onAugust 27, 2013

html页面中,诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用。

一. onfocus(获得焦点事件)
当一个文本框获得焦点时,它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中,这样的操作可以利用onfocus来实现。
以下的文本框,当鼠标指针移过去时,里面的文字全部被选中:
请输入网址
这是怎么做的呢?看以下代码及解释:
<input type="text"name="url" value="http://www.gxblk.com" size="30"onmousemove="this.focus();this.select();">
代码里,input标签内嵌入了onmousemove(鼠标指针经过)事件的JS语句,其等号后面的this.focus()意为其自身获得焦点;获得焦点的标志是该文本框内将出现输入光标,但要让其内的文字全部被选中,我们还得用上this.select()语句,它的意思就是选中全部文本框里的文字。

二. onblur(失去焦点事件)
我们经常会检测文本框是否已经被正确输入,检测工作通常在用户点击了提交按钮之后进行,事实上,利用控件失去焦点的时候,我们就可以实时进行这个检测工作,这样的话,onblur事件就派上用场了。
以下例子有四个文本框,如果还没有任何单击它们当中的任意一个的操作,那么什么事情也不会发生,但是,当你单击了其中的任何一个使其拥有了焦点(输入光标在里面),如果什么都没有输入并且单击了别的地方令其失去焦点,就会弹出一个警告,试试看
姓名
性别
年龄
住址

以下是代码和解释:
表单代码

<form name="blur_test"> 
<p>姓名 <input type="text" name="name"value="" size="30"onblur="chkvalue(this)"><br> 
性别 <inputtype="text" name="sex" value=""size="30" onblur="chkvalue(this)"><br> 
年龄 <inputtype="text" name="age" value=""size="30" onblur="chkvalue(this)"><br> 
住址 <inputtype="text" name="addr" value=""size="30" onblur="chkvalue(this)"></p> 
</form>

JS代码
<scriptlanguage="javascript"> 
function chkvalue(txt) { 
if(txt.value=="") alert("文本框里必须填写内容!"); 
} 
</script>

表单代码里,每一个方框框的代码都嵌入一个onblur JS语句,它们都调用后面的JS代码中的自定义函数chkvalue(this),意思是,当文本框失去焦点时就调用chkvalue()函数;这chkvalue()函数检测文本框是否为空,如果是就弹出警告窗口。该函数有一个参数(txt),对应于前面文本框调用该函数的参数(this)即自身。
Javascript 相关文章推荐
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
javascript:void(0)使用探讨
Aug 27 #Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 #Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 #Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 #Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 #Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 #Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 #Javascript
You might like
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php格式化金额函数分享
2015/02/02 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
vue开发中遇到的问题总结
2020/04/07 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python add_argument()用法解析
2020/01/29 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
计算机专业自荐信范文
2014/05/28 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
承诺书范本大全
2015/05/04 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL