在输入车牌号的时候,因为很多车牌号都是数字字母混合排列的,所以如果用输入法输入就需要频繁切换数字跟字母,有点麻烦。
在这里我们就用自定义一个弹出框代替键盘来使用。
1、首先,要禁止掉文本框弹出输入法,这里我用readonly
<input class="selectCarBtn" readonly="readonly" type="text" placeholder="输入车牌号">
2、其次需要一个键盘弹框,这里就用div给做一个,想怎么排列就怎么布局。这里的键盘都是写死的,有需要可以循环出来。
1 <div class="popup OpacityUp popup-selectCarBox">
2 <div class="btn">
3 <div class="selectCarTit">
4 <div class="closeSelectCarBox">取消</div>
5 </div>
6 <div class="selectCarCon">
7 <ul class="number">
8 <li>1</li>
9 <li>2</li>
10 <li>3</li>
11 <li>4</li>
12 <li>5</li>
13 <li>6</li>
14 <li>7</li>
15 <li>8</li>
16 <li>9</li>
17 <li>0</li>
18 </ul>
19 <ul class="english">
20 <li>Q</li>
21 <li>W</li>
22 <li>E</li>
23 <li>R</li>
24 <li>T</li>
25 <li>Y</li>
26 <li>U</li>
27 <li>I</li>
28 <li>O</li>
29 <li>A</li>
30 <li>S</li>
31 <li>D</li>
32 <li>F</li>
33 <li>G</li>
34 <li>H</li>
35 <li>J</li>
36 <li>K</li>
37 <li>P</li>
38 <li>Z</li>
39 <li>X</li>
40 <li>C</li>
41 <li>V</li>
42 <li>B</li>
43 <li>N</li>
44 <li>M</li>
45 <li>L</li>
46 <li></li>
47 <li class="key_ok">确定</li>
48 <li class="delect_back"></li>
49 </ul>
50 </div>
51 </div>
52 </div>
3、键盘有了,再给它添加点击事件。这里定义一个变量carNum来存放输入的值。
主要是这个回删事件,用 carNum.substr(0, carNum.length - 1) 来得到回删后的值。
1 // 自定义键盘事件
2 $(".selectCarBtn").click(function(){
3 $.popup(".popup-selectCarBox");
4 });
5 $(".closeSelectCarBox").click(function(){
6 $.closeModal(".popup-selectCarBox");
7 });
8 $(".popup-selectCarBox").click(function(e){
9 $.closeModal(".popup-selectCarBox");
10 })
11 $(".selectCarCon").click(function(e){
12 e.stopPropagation();
13 })
14 var carNum = "";
15 $(".selectCarCon li").not('.delect_back,.key_ok').click(function(){
16 carNum = carNum $(this).html();
17 $(".selectCarBtn").val(carNum);
18 });
19 $(".selectCarCon li.delect_back").click(function(){
20 var num = carNum.substr(0, carNum.length - 1);
21 $(".selectCarBtn").val(num);
22 carNum = num;
23 });
24 $(".selectCarCon li.key_ok").click(function(){
25 $.closeModal(".popup-selectCarBox");
26 });
但是还不够完善,还有一些问题没有解决:
例如:
输入框没有光标了
怎么完善呢???