首页 > 编程笔记 > JavaScript笔记
JS focus和blur事件:焦点处理
在 JavaScript 中,焦点处理主要包括获取焦点(focus)和失去焦点(blur)事件类型。所谓焦点,就是激活表单字段,使其可以相应键盘事件。
【示例1】在下面示例中为所有输入表单元素绑定了 focus 和 blur 事件处理函数,设置当元素获取焦点时呈凸起显示,失去焦点时则显示为默认的凹陷效果。
【示例2】在下面示例中设计在页面加载完毕后将焦点转移到表单中的第 1 个文本框字段中,让其准备接收用户输入。
如果是隐藏字段(<input type="hidden">)或者使用 CSS 的 display 和 visibility 隐藏字段显示,设置其获取焦点将引发异常。
blur() 方法的作用时从元素中移走焦点。在调用 blur() 方法时,并不会把焦点转移到某个特定的元素上,仅仅时将焦点移走。早期开发中有用户使用 blur() 方法代替 readonly 属性,创建只读字段。
focus
当单击或使用 Tab 键切换到某个表单元素或超链接对象时,会触发该事件。focus 事件是确定页面内鼠标当前定位的一种方式。在默认情况下,整个文档处于焦点状态,但是单击或使用 Tab 键可以改变焦点的位置。blur
blur 事件类型表示在元素失去焦点时响应,它与 focus 事件类型是相对的,主要作用于表单元素和超链接对象。【示例1】在下面示例中为所有输入表单元素绑定了 focus 和 blur 事件处理函数,设置当元素获取焦点时呈凸起显示,失去焦点时则显示为默认的凹陷效果。
<input type="text" /> <input type="text" /> <script> var o = document.getElementsByTagName("input"); //获取表单元素集合 for (var i = 0; i < o.length; i ++ ) { //遍历所有表单元素 o[i].onfocus = function () { //注册focus事件处理函数 this.style.borderStyle = "outset"; } o[i].blur = function () { //注册focus事件处理函数 this.style.borderStyle = "inset"; } } </script>每个表单字段都有两个方法:focus() 和 blur(),其中 focus() 方法用于设置表单字段为焦点。
【示例2】在下面示例中设计在页面加载完毕后将焦点转移到表单中的第 1 个文本框字段中,让其准备接收用户输入。
<form id="myform" method="post" action="#"> 姓名<input type="text" name="name" /><br /> 密码<input type="password" name="pass" /><br /> </form> <script> var form = document.getElementById("myform"); var field = form.elements["name"]; window.onload = function () { field.focus(); } </script>
如果是隐藏字段(<input type="hidden">)或者使用 CSS 的 display 和 visibility 隐藏字段显示,设置其获取焦点将引发异常。
blur() 方法的作用时从元素中移走焦点。在调用 blur() 方法时,并不会把焦点转移到某个特定的元素上,仅仅时将焦点移走。早期开发中有用户使用 blur() 方法代替 readonly 属性,创建只读字段。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算