jquery组合输入框

最新推荐文章于 2024-01-22 07:00:00 发布

weixin_30849403

最新推荐文章于 2024-01-22 07:00:00 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mapping/archive/2012/11/24/2785730.html

本文介绍了一种使用jQuery实现的分组输入框功能，该功能适用于手机号码和银行账号等特定格式的数据输入。通过设定每个输入框的最大长度并自动跳转焦点，确保数据正确输入的同时提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

下面就看一下使用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会莫名其妙的中断，焦点停在上一级就不会再往上面找输入不完全的输入框。

手机：
<input type="text" id="i1" maxlength="3" size="3" /> -
<input type="text" id="i2" maxlength="4" size="4" /> -
<input type="text" id="i3" maxlength="4" size="4" />

使用方法：

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

如果要实现

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

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

转载于:https://www.cnblogs.com/mapping/archive/2012/11/24/2785730.html