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

但是還不夠完善，還有一些問題沒有解決：

例如：

    輸入框沒有光標了

怎么完善呢？？？