js 实现序列号效果实现
浏览数：39 /
时间：2015年06月09日
前端的朋友可能遇到过这样的需求，要求在页面输入一串序列号，或激活码（就像在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‘));
});
打开浏览器看看我们的序列号组件吧！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
