JS自定义手机端H5键盘
在输入车牌号的时候，因为很多车牌号都是数字字母混合排列的，所以如果用输入法输入就需要频繁切换数字跟字母，有点麻烦。
在这里我们就用自定义一个弹出框代替键盘来使用。
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 });
但是还不够完善，还有一些问题没有解决：
例如：
输入框没有光标了
怎么完善呢？？？
