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 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
document.getElementById介绍
Sep 13 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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实现随机显示图片方法汇总
2015/05/21 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
分享15个最受欢迎的Python开源框架
2014/07/13 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
校庆活动策划方案
2014/06/05 职场文书
军人离婚协议书样本
2014/10/21 职场文书
文明班级申报材料
2014/12/24 职场文书
储备店长岗位职责
2015/04/14 职场文书
绿色环保倡议书
2015/04/28 职场文书
新生儿未入户证明
2015/06/23 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书