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操纵Cookie实现购物车程序
Feb 15 Javascript
JavaScript 动态生成方法的例子
Jul 22 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
vue之nextTick全面解析
May 17 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
vue.js循环radio的实例
Nov 07 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 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 模拟$_PUT实现代码
2010/03/15 PHP
php实现文件下载更能介绍
2012/11/23 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
php常用的工具开发整理
2019/09/26 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
为数据添加append,remove功能
2006/10/03 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python脚本内运行linux命令的方法
2015/07/02 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
nohup的用法
2012/11/26 面试题
《燕子专列》教学反思
2014/02/21 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
关于保护环境的标语
2014/06/09 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS