JS: onfocus和onblur事件应用举例
一. onfocus（获得焦点事件）
当一个文本框获得焦点时，它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中，这样的操作可以利用onfocus来实现。
以下的文本框，当鼠标指针移过去时，里面的文字全部被选中：
请输入网址
这是怎么做的呢？看以下代码及解释：
<input type="text" name="url" value="http://www.gxblk.com" size="30" οnmοusemοve="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" οnblur="chkvalue(this)"><br>
性别 <input type="text" name="sex" value="" size="30" οnblur="chkvalue(this)"><br>
年龄 <input type="text" name="age" value="" size="30" οnblur="chkvalue(this)"><br>
住址 <input type="text" name="addr" value="" size="30" οnblur="chkvalue(this)"></p>
</form>
JS代码——
<script language="javascript">
function chkvalue(txt) {
if(txt.value=="") alert("文本框里必须填写内容!");
}
</script>
解释——
表单代码里，每一个方框框的代码都嵌入一个onblur JS语句，它们都调用后面的JS代码中的自定义函数chkvalue(this)，意思是，当文本框失去焦点时就调用chkvalue()函数；这chkvalue()函数检测文本框是否为空，如果是就弹出警告窗口。该函数有一个参数（txt），对应于前面文本框调用该函数的参数（this）即自身。
JS: onfocus和onblur事件应用举例相关推荐
- 笔记：js:onfocus和onblur事件
onfocus事件 onfocus事件在对象得到焦点的时候触发. 曾经我学习时不明白焦点的定义,那就试一试就明白了 ^ _ ^ 这个闪着蓝光,鼠标光标在的地方就是获得了焦点 当然这个蓝色其实是outl ...
- div如何添加onfocus和onblur事件
正文 有时候自己DIY一些组件的时候,容器一般就用div. 而div默认是没有聚焦的,没有聚焦onfocus和失焦onblur事件. 不过只要加上tabindex属性就好啦,值可以随便些. <d ...
- JS标签的各种事件的举例
1.鼠标单击事件( onclick ) 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv=&quo ...
- JS的onBlur事件与onfocus事件
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...
- js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法 监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
- 在php中焦点事件,Js中的onblur和onfocus事件（图文教程）
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...
- Js中的onblur和onfocus事件
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...
- JS事件 失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。...
失焦事件(onblur) onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序. 如下代码, 网页中有用户和密码两个文本框.当前光标 ...
- JS中onfocus()事件，onblur()事件，onload()事件
1. onfocus 事件在对象获得焦点时发生. 实例: <html> <head> <script type="text/javascript"&g ...
最新文章
- Qt控制台工程不能调试问题
- 【MaxCompute】学习笔记操作表sql
- 视频会议场景下的弱网优化
- Jenkins插件开发（四）-- 插件发布
- python中bar函数的用法_Python：如何在函数中使用progressbar
- excel服务器2010网站,勤哲Excel服务器2010高级企业版完整安装包
- 通过python获取浏览器cookie
- 踩过坑的可控硅设计 经验总结
- 核方法也称为核技巧（Kernel method）
- Python打印九九乘法表
- iOS 10 通知 －－UserNotifications
- SPSS新手教程——对问卷数据进行处理之样本分布
- 浅谈航管二次雷达工作原理
- 面试题-java高级（答案超详细）
- Map 和ConcurrentMap 线程不安全和线程安全证明
- 留学生VS应届生，留学生在当下还有求职优势吗
- 超级计算机有关文献,超级计算机系统性能平衡性预先评价方法研究
- java中的\t\r\n\b(Java转义字符)分别是什么？
- 从0到1学习CTF WEB
- 数据结构第二版（朱昌杰版）第四章：串、多维数组、广义表