网页组合输入框的实现

先来看一下应用场景：手机号3-4-4，银行账号4-4-4-4的分组输入等，如下图所示

那现在来整理一下这种组合输入框的需求：

下面就看一下使用jquery怎么实现：

(function($) {
        $.fn.combineinput = function(target) {
              return this.each(function() {
                   if(this.tagName == 'INPUT') {
                        var $tt = $(this);
                        $(this).keyup(function() {
                            if($(this).attr('maxlength') == $(this).val().length) {
                                $(target).focus();
                            }
                        });
                        $(target).keydown(function(e) {
                            //backspace
                            if(e.keyCode == 8 && $(this).val() == '') {
                                $tt[0].focus();
                            }
                        }).focus(function() {
                            //keep focus on last incomplete input
                            if($tt.attr('maxlength') > $tt.val().length) {
                                //fixed jquery focus break
                                $tt[0].focus();
                            }
                        });
                   }
              });
         };
    })(jQuery);

这里面用$tt[0].focus()而不是$tt.focus()，是因为jquery的focus会莫名其妙的中断，焦点停在上一级就不会再往上面找输入不完全的输入框。

1. 每个输入框都有一个maxlength属性，限制其很大长度，如上输入框的maxlength分别会设置：3、4、4；
2. 1号输入框输入了3个字符后焦点跳到2号，2号输入了4个字符焦点跳到3号，依此类推；
3. 在3号输入框按回退删除时，删到内容为空时，焦点跳到2号，继续删除；
4. 必须按顺序1》2》3进行输入操作，即焦点永远在后面一个未填写完全的输入框上。
5. 手机

6. 
   < i  nput t ype="text" id="i1" maxlength="3" size="3" /> 
   < i  nput t ype="text" id="i2" maxlength="4" size="4" />  
   < i  nput t ype="text" id="i3" maxlength="4" size="4" />
   
    

7. 使用方法：

   
   $('#i1').combinei nput('#i2');
   $('#i2').combinei nput('#i3');

   如果要实现

   
   $('#i1').combinei nput('#i2').combineinput('#i3');

   这种方式，只需返回$(target)即可，不过这样不太符合jquery插件的规范

评论加载中... 内容： 评论者： 验证码：