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