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')); 
});

打開瀏覽器看看我們的序列號組件吧！