随笔 - 89  文章 - 0  评论 - 2  阅读 - 11万 

H5 调起车牌号码键盘

效果图：

 

 

 

 

HTML页面

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--键盘输入框--><br>         <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>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!--键盘--> <br>   <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样式：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<br>.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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
$(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)
    })
})

　　

posted on   我的梦想是开个小店  阅读(1222)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示