首页 » JavaScript » 表单字段自动切换焦点

表单字段自动切换焦点

使用JavaScript可以从多个方面增强表单字段的易用性。其中,最常见的一种方式就是在用户填写完当前字段时,自动将焦点切换到下一个字段。通常,在自动切换焦点之前,必须知道用于已经输入了既定长度的数据(例如电话号码)。例如,美国的电话号码通常会分为三部分:区号、句号和另外4为数字。为取得完成的电话号码,很多网页中都会提供下列3个文本框:

<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="3">

为增强易用性,同时加快数据输入,可以在前一个文本框中的字符达到最大数量后,自动将焦点切换到下一个文本框。

var EventUtil = {
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
};
function tabForward(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if (target.value.length == target.maxLength) {
        var form = target.form;
        for (var i = 0, len = form.elements.length; i < len; i++) {
            if (form.elements[i] == target) {
                form.elements[i + 1].focus();
                return;
            }
        }
    }
};
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);

开始的tabForward()函数是实现“自动切换焦点”的关键所在。这个函数通过比较用户输入的值与文本框的maxlength特性,可以确定是否已经达到最大长度。如果这两个值相等,则需要查找标点字段集合。直至找到下一个文本框。找到下一个文本狂之后,则将焦点切换到文本框。然后,我们把这个函数指定为每个文本框的onkeyup事件处理程序。由于keyup事件会在用户输入了新字符之后触发,所以此时是检测文本框中内容的最佳时机。这样以来,用户在填写这个简单的表单时,就不必通过按制表键切换表单字段和提交表单了。

此文章发表在 JavaScript 标签为 . 将固定链接加入收藏.