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