JS自定义手机端H5键盘

在输入车牌号的时候，因为很多车牌号都是数字字母混合排列的，所以如果用输入法输入就需要频繁切换数字跟字母，有点麻烦。

在这里我们就用自定义一个弹出框代替键盘来使用。

1、首先，要禁止掉文本框弹出输入法，这里我用readonly

<input class="selectCarBtn" readonly="readonly" type="text" placeholder="输入车牌号">

2、其次需要一个键盘弹框，这里就用div给做一个，想怎么排列就怎么布局。这里的键盘都是写死的，有需要可以循环出来。

 <div class="popup OpacityUp popup-selectCarBox">

     <div class="btn">

         <div class="selectCarTit">

             <div class="closeSelectCarBox">取消</div>

         </div>

         <div class="selectCarCon">

             <ul class="number">

                 <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 class="english">

                 <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>A</li>

                 <li>S</li>

                 <li>D</li>

                 <li>F</li>

                 <li>G</li>

                 <li>H</li>

                 <li>J</li>

                 <li>K</li>

                 <li>P</li>

                 <li>Z</li>

                 <li>X</li>

                 <li>C</li>

                 <li>V</li>

                 <li>B</li>

                 <li>N</li>

                 <li>M</li>

                 <li>L</li>

                 <li></li>

                 <li class="key_ok">确定</li>

                 <li class="delect_back"></li>

             </ul>

         </div>

     </div>

 </div>

3、键盘有了，再给它添加点击事件。这里定义一个变量carNum来存放输入的值。

主要是这个回删事件，用 carNum.substr(0, carNum.length - 1) 来得到回删后的值。

 // 自定义键盘事件

 $(".selectCarBtn").click(function(){

     $.popup(".popup-selectCarBox");

 });

 $(".closeSelectCarBox").click(function(){

     $.closeModal(".popup-selectCarBox");

 });

 $(".popup-selectCarBox").click(function(e){

     $.closeModal(".popup-selectCarBox");

 })

 $(".selectCarCon").click(function(e){

     e.stopPropagation();

 })

 var carNum = "";

 $(".selectCarCon li").not('.delect_back,.key_ok').click(function(){

     carNum = carNum + $(this).html();

     $(".selectCarBtn").val(carNum);

 });

 $(".selectCarCon li.delect_back").click(function(){

     var num = carNum.substr(0, carNum.length - 1);

     $(".selectCarBtn").val(num);

     carNum = num;

 });

 $(".selectCarCon li.key_ok").click(function(){

     $.closeModal(".popup-selectCarBox");

 });

但是还不够完善，还有一些问题没有解决：

例如：

输入框没有光标了

怎么完善呢？？？

巴特西

JS自定义手机端H5键盘

最新文章

热门文章