可以访问这里查看更多关于大数据平台建设的原创文章。

使用Javascript可以从多个方面增强表单字段的易用性。其中，最常见的一种方式就是在用户填写完当前的字段(文本框)时，自动将焦点切换到下一个字段(文本框)。

要实现这个功能必须知道用户输入了既定长度的数据(例如电话号码)。例如美国的电话号码通常分为三部分：区号，局号和另外4位数字。为了取得完整的电话号码，很多网页中都会提供下列3个文本框：

当用户在第一个文本框中输入了3个数字后，焦点就会自动切换到第二个文本框，再输入3个数字，焦点又会切换到第三个文本框。这种自定切换焦点的功能，可以通过下列代码实现：

　var EventUtil = {

   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;
        }
    },

/**

* 该方法返回event对象的引用。考虑到IE中对事件对象的位置不同，可以使用这个方法来取得event对象。在使用这个方法时必须有一个事件对象产道事件处理程序中，而且要把该变量传给这个方法。

    getEvent: function(event){
        return event ? event : window.event;
    },

/**

* 该方法返回事件的目标

    getTarget: function(event){
        return event.target || event.srcElement;
    }
  };

/*通过比较用户输入的值与文本框的maxlength特性，可以确定是否已经达到最大长度

*当这两个值相等时，则需要查找表单字段集合，直到直到下一个文本框，找到下一个文本框后，则将焦点切换到该文本框

        */
            function tabForward(event){  // event事件对象传到事件处理程序中去
                event = EventUtil.getEvent(event);  // 把event传给getEvent()方法
                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);      // keyup事件会在用户输入了新字符之后触发
            EventUtil.addHandler(textbox2, "keyup", tabForward);
            EventUtil.addHandler(textbox3, "keyup", tabForward);

        })();
        </script>

keyup事件会在用户输入了新字符之后触发，所以此时是检测文本框内容长度的最佳时机，这样一来，用户在填写这个表单时，就实现了自动切换焦点。

注：有关EventUtil对象的相关不是太清楚的可以看我上篇文章(http://www.cnblogs.com/itdream/archive/2012/06/01/2530747.html)。

参考:Javascript高级程序设计(第2版)

更多文章

关注微信公众号

公告