H5 調起車牌號碼鍵盤

DIV

     <!--鍵盤輸入框-->
         <div class="weui-cell weui-cell_active" id="js_cell">
                        <div class="weui-cell__hd"><label class="weui-label">車牌號碼</label></div>
                        <div class="weui-cell__bd weui-flex" id="key">
                            <input id="car_no" class="weui-input" type="text" style="display: none"/>
                            <div class="carLicenseMain">
                                <ul id="all">
                                    <li class="active" id="c1"></li>
                                    <li id=“c2”></li>
                                    <li id=“c3”></li>
                                    <li id=“c4”></li>
                                    <li id=“c5”></li>
                                    <li id=“c6”></li>
                                    <li id=“c7”></li>
                                    <li class="xinnengyuan" id=“c8”></li>
                                </ul>
                            </div>
                        </div>
                    </div>

　　

<!--鍵盤--> 
   <div id="keyboardBox">
        <div class="provienceBox" id="provienceBox">
            <div class="shutprovince" id="shut"><img src="../image//xiala.png" class="xiala"/></div>
            <ul>
                <li>京</li>
                <li>津</li>
                <li>渝</li>
                <li>滬</li>
                <li>冀</li>
                <li>晉</li>
                <li>遼</li>
                <li>吉</li>
                <li>黑</li>
                <li>蘇</li>
            </ul>
            <ul>
                <li>浙</li>
                <li>皖</li>
                <li>閩</li>
                <li>贛</li>
                <li>魯</li>
                <li>豫</li>
                <li>鄂</li>
                <li>湘</li>
                <li>粵</li>
                <li>瓊</li>
            </ul>
            <ul>
                <li>川</li>
                <li>貴</li>
                <li>雲</li>
                <li>陝</li>
                <li>甘</li>
                <li>青</li>
                <li>蒙</li>
                <li>桂</li>
                <li>寧</li>
                <li>新</li>
            </ul>
            <ul>
                <li class="changeContentBtn other">ABC</li>
                <li>藏</li>
                <li>使</li>
                <li>領</li>
                <li>警</li>
                <li>學</li>
                <li>港</li>
                <li>澳</li>
                <li class="deleteBtn other">刪除</li>
            </ul>
        </div>
        <div class="textBox" id="textBox">
            <div class="shutprovince" id="shuta"><img src="../image//xiala.png" class="xiala"/></div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>0</li>
            </ul>
            <ul>
                <li>Q</li>
                <li>W</li>
                <li>E</li>
                <li>R</li>
                <li>T</li>
                <li>Y</li>
                <li>U</li>
                <li>I</li>
                <li>O</li>
                <li>P</li>
            </ul>
            <ul>
                <li>A</li>
                <li>S</li>
                <li>D</li>
                <li>F</li>
                <li>G</li>
                <li>H</li>
                <li>J</li>
                <li>K</li>
                <li>L</li>
            </ul>
            <ul>
                <li class="changeContentBtn other">省份</li>
                <li>Z</li>
                <li>X</li>
                <li>C</li>
                <li>V</li>
                <li>B</li>
                <li>N</li>
                <li>M</li>
                <li class="deleteBtn other">刪除</li>
            </ul>
        </div>
    </div>

　　CSS

.shutprovince{
            margin-bottom: 5px;
            height: 2.2rem;
            line-height: 1.9rem;
            text-align: right;
            padding: 0 0.6rem;
            font-size: 0.85rem;
            background-color: #f9f9f9;
            color: #333;
            border-bottom: 0.03rem solid #ddd;
            border-top: 0.01rem solid #eee;
        }
       
         .carLicenseMain{
            width: 100%;
            /* height: 160px; */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
         .carLicenseMain ul{
            width: 100%;
            height: 36px;
            /* display: flex; */
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
         .carLicenseMain ul li{
            width: 22px;
            height: 40px;
            border: 1px solid #cccccc63;
            text-align: center;
            line-height: 40px;
            float: left;
        }
         .carLicenseMain ul li:last-of-type{
            margin: 0;
        }
         .carLicenseMain ul li.active{
            border: 2px solid #06ae5661;
        }
         .carLicenseMain ul li.xinnengyuan{
            background: url(../image/jia.png) no-repeat center;
            background-size: 65% 50%;
            border: 2px dashed #CCCCCC;
        }
        .xiala{
            width:7.5%;
            margin-top:7px;
        }

　　JS

$(document).ready(function() {
    var num1="";
    var isclick= true; 
    //鍵盤隱藏，點擊觸發顯示

    $("#keyboardBox").hide()
    $(".carLicenseMain").on("click",function(){
        $("#keyboardBox").show()
    })
    //關閉事件-省份
    $("#shut").on("click",function(){
        $("#keyboardBox").hide()
    })
    //關閉事件-數字
    $("#shuta").on("click",function(){
        $("#keyboardBox").hide()
    })
    //鍵盤點擊動畫
    $(".textBox ul li").each(function(){
        $(this).click(function(){
            $(this).addClass("activeKey")//添加動畫效果
            $(this).siblings().removeClass("activeKey")//移除動畫效果
            var interval=setTimeout(function(){//定時器及時清除自身動畫效果
                $(this).removeClass("activeKey")
                window.clearInterval(interval)
            }.bind(this),200);
        })
    })
    var num = 6;//需要輸入的車牌數
    //切換鍵盤
    $('.changeContentBtn').click(function(){
        $('li').siblings().removeClass("activeKey")
        if($(this).html()=='ABC'){
            $('#textBox').show();
            $('#provienceBox').hide();
        }else{
            $('#textBox').hide();
            $('#provienceBox').show();
        }
    })
     
    //新能源點擊事件
    $('.xinnengyuan').click(function(){
        num = 7;
        var index = getIndex();
        //alert(index);
        //console.log(isclick);
        //console.log( $('.carLicenseMain ul li.active').html($(self).html()).addClass('active'));
       // console.log(index+""+num);
        num1 =  $("#car_no").val();
        
        if(isclick)
        {
            isclick= false;
            if(num1.length == 7)
            {
                //console.log("這里d");
                //$('.carLicenseMain ul li.active').html($(self).html()).addClass('active'); 
                //判斷第八位數值是否為空，如果為空，點擊后綠色框不移到下一個框內
                $('.carLicenseMain ul li.active').html($(self).html()).removeClass('active').next().addClass('active');  
               
            }
            // setTimeout(function(){ 
            //     isclick = true;
            // }, 60000);
        }
        //console.log(num1);
        //輸入車牌號不滿足七位數,無法輸入最后一位
       
        //防止重復點擊，選中后禁止點擊
        $(this).removeClass('xinnengyuan');
    })
    //獲取當前車牌數字索引
    function getIndex(){
        var index = 0;
        $('.carLicenseMain ul li').each(function(){
            var reg = new RegExp('active');
            if(reg.test($(this).attr('class'))){
                //console.log(reg.test($(this).attr('class')));
                index = $(this).index();
            }
        })
        return index;
    }
    //自定義鍵盤處理函數
    function keyboard(num,self){
        var index = getIndex();
        //判斷輸入第一位為漢字
        //alert(index);
        if(index == 0)
        {
            var str = self.innerText;
            //alert(str);
            var str1 = /^[\u4e00-\u9fa5]*$/.test(str);
            if(str1 == false)
            {
                $("#error_tip").show();
                    $("#error_tip").html("請輸入省份");
                    return false;
            }
            else
            {
                //alert(str);
                // document.getElementById('c1').innerText =str;
                $("#error_tip").hide();
            }
        }
        if(index == 1)
        {
            var str = self.innerText;
            //alert(str);
            var str1 = /^[a-zA-Z]*$/.test(str);
            if(str1 == false)
            {
                $("#error_tip").show();
                    $("#error_tip").html("請輸入合法的英文標識");
                    return false;
            }
            else
            {
                $("#error_tip").hide();
            }
        }
        console.log(index);
        if(index > 1)
        {
            var str = self.innerText;
            //alert(str);
            var str1 = /^[\u4e00-\u9fa5]*$/.test(str);
            if(str1)
            {
                $("#error_tip").show();
                    $("#error_tip").html("請輸入合法號碼");
                    return false;
            }
            else
            {
                $("#error_tip").hide();
            }
        }
        
        var stra = self;
        //alert( $("#c1").innerText);
        a(index,stra);
        //console.log($("#c1").innerText+$("#c2").innerText)
        if(index<=num){
            if(index == num){
                //console.log($('.carLicenseMain ul li.active').html($(self).html()));
                $('.carLicenseMain ul li.active').html($(self).html());
            }else{
               // console.log($(self).html());
                //console.log($('.carLicenseMain ul li.active').html($(self).html()));
                $('.carLicenseMain ul li.active').html($(self).html()).removeClass('active').next().addClass('active');           
            }
            
            $('#textBox').show();
            $('#provienceBox').hide();
        }
    }
    //為車牌號碼賦值
    function a(index,self){
        switch(index){
            case 0:
                $("#car_no").val(self.innerText);
                break;
            case 1:
                var n1 = $("#car_no").val();
                var n2 = n1 + self.innerText;
                $("#car_no").val(n2);
                break;
            case 2:
                //num3 = num2+self.innerText;
                var n1 = $("#car_no").val();
                var n2 = n1 + self.innerText;
                $("#car_no").val(n2);
                break;
            case 3:
                var n1 = $("#car_no").val();
                var n2 = n1 + self.innerText;
                $("#car_no").val(n2);
                break;
            case 4:
                var n1 = $("#car_no").val();
                var n2 = n1 + self.innerText;
                $("#car_no").val(n2);
                break;
            case 5:
                var n1 = $("#car_no").val();
                var n2 = n1 + self.innerText;
                $("#car_no").val(n2);
                break;
            case 6:
                //當index ==6時，取最后一次的值賦值
                var n1 = $("#car_no").val();
                if(n1.length ==7)
                {
                    n1 = n1.substring(0, n1.length - 1);  
                }
                var n2 = n1 + self.innerText;
                $("#car_no").val(n2);
                //$("#c7").innerHTML=self.innerText;
                break;
            case 7:
                var n1 = $("#car_no").val();
                var n2 = n1 + self.innerText;
                $("#car_no").val(n2);
                //$("#c8").innerHTML=self.innerText;
                break;
            
        }
       // $("#car_no").val(num3);
        //console.log($("#car_no").val(num3));
       // $("#car_no").val(car);
        //return c1+c2;
    }
    //省份鍵盤點擊事件
    $('#provienceBox ul li:not(.other)').click(function(){
        $(this).addClass("activeKey")//添加動畫效果
        $(this).siblings().removeClass("activeKey")//移除動畫效果
        var interval=setTimeout(function(){//定時器及時清除自身動畫效果
            $(this).removeClass("activeKey")
            var self = this;
            keyboard(num,self);
            window.clearInterval(interval)
        }.bind(this),200);
        //省份點擊后鍵盤切換
        //var self = this;
        //keyboard(num,self);
    })
    //文本鍵盤點擊事件
    $('#textBox ul li:not(.other)').click(function(){
        var self = this;
        keyboard(num,self);
    })
    //回退按鈕點擊事件
    $('.deleteBtn').click(function(){
        var index = getIndex();
        //isclick = true;
        if(index == num){
            if($('.carLicenseMain ul li.active').html() != ''){
                $('.carLicenseMain ul li.active').html('');
                //$('.carLicenseMain ul li:last-of-type').addClass('xinnengyuan');
            }else{
                if(index == 7){
                    $('.carLicenseMain ul li:last-of-type').addClass('xinnengyuan');
                    num = 6;
                }
                $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('');
                isclick = true;
            }
        }else if(index < num && index > 1){
            $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('');
        }else if(index == 1){
            $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('省');
        }
        //每點擊一次，car_no的長度減一
        var carno = $("#car_no").val();
        if(carno.length >0)
        {
            var delcarno = carno.substring(0, carno.length - 1);  
            $("#car_no").val(delcarno);
            if(delcarno ==0)
            {
                $('#textBox').hide();
                $('#provienceBox').show();
            }
        }
    })
    //提交按鈕點擊事件
    $('#submitBtn').click(function(){
        var carNum=""
        $(".carLicenseMain ul li").each(function(index){
            carNum+=$(this).html()
        })
        alert(carNum)
    })
})