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 相关文章推荐
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
vue.js todolist实现代码
Oct 29 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 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实现八皇后算法
2019/05/06 PHP
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python下线程之间的共享和释放示例
2015/05/04 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
比驿:全球酒店比价网
2018/06/20 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
个人简历自荐信
2013/12/05 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
幼儿园标语大全
2014/06/19 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
初一英语教学反思
2016/02/15 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
Python基本知识点总结
2022/04/07 Python