首页 > 编程笔记 > JavaScript笔记

JS focus和blur事件:焦点处理

JavaScript 中,焦点处理主要包括获取焦点(focus)和失去焦点(blur)事件类型。所谓焦点,就是激活表单字段,使其可以相应键盘事件。

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 属性,创建只读字段。

所有教程

优秀文章