js 实现序列号效果实现

前端的朋友可能遇到过这样的需求，要求在页面输入一串序列号，或激活码（就像在PC正版软件中的序列号），可是HTML中并没有为我们提供类似的组件，我们来自己实现一个：

大体的思路是在表单里有一个隐藏的input，而表面上用一组input代替：

 <form name="" action="" method="post">
 <p>
 <label>请输入激活码：</label>
 <span class="act-code-group">
     <input id="act-code-item-1" name="act-code-item-1" class="act-code-item" type="text" /> -
     <input name="act-code-item-2" class="act-code-item" type="text" /> -
     <input name="act-code-item-3" class="act-code-item" type="text" /> -
     <input name="act-code-item-4" class="act-code-item" type="text" />
 </span>
     <input class="act-code-hidden" type="hidden" value="" />
 </p>

至于式样上的东西就留给大家，自己发挥吧！

然后我们来处理一下相关逻辑：

 function initActCodeGroup(dom){
     var $ = jQuery;
     var actCodeGroup = dom,
         actCodeItem = actCodeGroup.find('.act-code-item');
     var ctrlPress = false;
     //actCodeItem.attr('maxlength', '5');
     actCodeItem.keyup(function(e){
         var oldVal = $(this).val();
         if(e.keyCode === 8){
             // backspace
             if(oldVal.length <= 0){
                 $(this).prev().focus();
             }
         }else if(e.keyCode === 86 && ctrlPress){
             //ctrl + v
             var parseTxt = $(this).val(),
                 parseTxtLen = parseTxt.length;

             ctrlPress = false;

             var actCodes = [];
             if(parseTxt.indexOf('-') >= 0){
                 actCodes = parseTxt.split('-');
             }else{
                 if(parseTxtLen >= 4){
                     actCodes.push(parseTxt.substr(0, 4));
                 }else{
                     actCodes.push(parseTxt.substr(0, parseTxtLen));
                 }
                 if(parseTxtLen >= 8){
                     actCodes.push(parseTxt.substr(4, 4));
                 }else{
                     actCodes.push(parseTxt.substr(4, parseTxtLen-4));
                 }
                 if(parseTxtLen >= 12){
                     actCodes.push(parseTxt.substr(8, 4));
                 }else{
                     actCodes.push(parseTxt.substr(8, parseTxtLen-8));
                 }
                 if(parseTxtLen >= 16){
                     actCodes.push(parseTxt.substr(12, 4));
                 }else{
                     actCodes.push(parseTxt.substr(12, parseTxtLen-12));
                 }
             }

             if(actCodes.length > 1){
                 var curInput = $(this);
                 $.each(actCodes, function(i, v){
                     if(curInput && v.length <= 4){
                         curInput.val(v);
                         curInput = curInput.next();
                     }else{
                         return false;
                     }
                 });
             }

         }else if(e.keyCode === 17){
             setTimeout(function(){
                 ctrlPress = false;
             }, 1000);
         }else{
             if(oldVal.length >= 4){
                 $(this).val(oldVal.substr(0,4));
                 if($(this).next().length > 0){
                     $(this).next().focus();
                 }
             }
         }
     }).keydown(function(e){
         if(e.keyCode === 17){
             ctrlPress = true;
         }
     });
 }

这样就实现了4*4的序列号组件，接下来调用这个初始化函数就好了

$(document).ready(function(){
        initActCodeGroup($('.act-code-group')); 
});

打开浏览器看看我们的序列号组件吧！