首页 > 编程笔记 > JavaScript笔记
阅读:13
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 属性,创建只读字段。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频