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

更多...

加载中...