码迷,mamicode.com
首页 > Web开发 > 详细

js 实现序列号效果实现

时间:2015-03-03 20:16:43      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:

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

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

 1 <form name="" action="" method="post">
 2 <p>
 3 <label>请输入激活码:</label>
 4 <span class="act-code-group">
 5     <input id="act-code-item-1" name="act-code-item-1" class="act-code-item" type="text" /> - 
 6     <input name="act-code-item-2" class="act-code-item" type="text" /> - 
 7     <input name="act-code-item-3" class="act-code-item" type="text" /> - 
 8     <input name="act-code-item-4" class="act-code-item" type="text" />
 9 </span>
10     <input class="act-code-hidden" type="hidden" value="" />
11 </p>

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

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

 1 function initActCodeGroup(dom){
 2     var actCodeGroup = dom,
 3         actCodeItem = actCodeGroup.find(‘.act-code-item‘);
 4     var ctrlPress = false;
 5     //actCodeItem.attr(‘maxlength‘, ‘5‘);
 6     actCodeItem.keyup(function(e){
 7         var oldVal = $(this).val();
 8         if(e.keyCode === 8){
 9             // backspace
10             if(oldVal.length <= 0){
11                 $(this).prev().focus();
12             }
13         }else if(e.keyCode === 86 && ctrlPress){
14             //ctrl + v
15             var parseTxt = $(this).val(),
16                 parseTxtLen = parseTxt.length;
17 
18             ctrlPress = false;
19 
20             var actCodes = [];
21             if(parseTxt.indexOf(‘-‘) >= 0){
22                 actCodes = parseTxt.split(‘-‘);
23             }else{
24                 if(parseTxtLen >= 4){actCodes.push(parseTxt.substr(0, 4));}
25                 if(parseTxtLen >= 8){actCodes.push(parseTxt.substr(4, 4));}
26                 if(parseTxtLen >= 12){actCodes.push(parseTxt.substr(8, 4));}
27                 if(parseTxtLen >= 16){actCodes.push(parseTxt.substr(12, 4));}
28             }
29 
30             if(actCodes.length > 1){
31                 var curInput = $(this);
32                 $.each(actCodes, function(i, v){
33                     if(curInput && v.length <= 4){
34                         curInput.val(v);
35                         curInput = curInput.next();
36                     }else{
37                         return false;
38                     }
39                 });
40             }
41 
42         }else if(e.keyCode === 17){
43             setTimeout(function(){
44                 ctrlPress = false;
45             }, 1000);
46         }else{
47             if(oldVal.length >= 4){
48                 $(this).val(oldVal.substr(0,4));
49                 if($(this).next().length > 0){
50                     $(this).next().focus();
51                 }
52             }
53         }
54     }).keydown(function(e){
55         if(e.keyCode === 17){
56             ctrlPress = true;
57         }
58     });
59 }

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

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

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

js 实现序列号效果实现

标签:

原文地址:http://www.cnblogs.com/webARM/p/4311651.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!