在專案開發的過程中呢，我們需要使用者輸入一些東西，但又不願意讓使用者隨意的進行輸入，因而可能會選擇使用一個自定義的輸入法，來限制使用者輸入的東西，那麼接下來，我們就通過一個簡單的例子，來看看，移動端網頁中，輸入法該怎麼去設定。這裡我們依舊使用了我們的老朋友Vue，來進行實現。

首先我們來看一下html程式碼中，需要些什麼。在這裡呢，我們用一個輸入車牌號作為例子，首先vue的引入和移動端的設定在這裡就不說啦

<div id="main">
    <div class="carNumber" v-touch:tap="onTypewriting">
        <input type="text" v-model="carNumber" maxlength="8" readonly> <!-- ①一個輸入框 -->
    </div>
    <span v-touch:tap="onOfferTap" class="cherkBtn">確定</span> <!-- ②確定按鈕 -->
    <div class="typer" v-show="showTyper!=0"> <!-- ③輸入鍵盤 -->
        <ul v-show="showTyper==1"> <!-- ④省的輸入 -->
            <li class="typer-pro" v-for="item in provinces" :class="{'is-closeType':item=='關閉'}" v-touch:tap="input(item)">{{item}}</li>
        </ul>
        <ul v-show="showTyper==2"> <!-- ⑤字母數字的輸入 -->
            <li class="typer-num" v-for="item in keyNums" :class="{'is-A': item=='A','is-OK':item=='OK','is-Del':item=='Del'}" v-touch:tap="input(item)">{{item}}</li>
        </ul>
    </div>
</div>
 

②確定按鈕：用於最後檢測這個的輸入是否的合法的

③輸入鍵盤是否彈出，以及彈出什麼輸入鍵盤，是由showTyper這個data決定的

④⑤輸入車牌號由兩部分構成：省份和數字字母，因而我們需要設定兩個鍵盤

那麼接下來我們就來做一個大概的css樣式，這裡我們主要放在鍵盤上

.typer {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    height: 3.5rem;
    width: 100%;
    padding-top: .1rem;
}

.typer li {
    float: left;
    height: .7rem;
    margin: .1rem .05rem 0;
    color: #333;
    text-align: center;
    font-size: .32rem;
    line-height: .7rem;
    background-color: #ccc;
    -webkit-border-radius: .1rem;
    -moz-border-radius: .1rem;
    border-radius: .1rem;
}

.typer li.typer-pro {
    width: .62rem;
    padding: 0 .15rem;
}

.typer li.typer-pro.is-closeType {
    width: 1.2rem;
    float: right;
}

.typer li.typer-num {
    width: .62rem;
    padding: 0 .1rem;
}

.typer li.typer-num.is-A {
    margin-left: .31rem;
}

.typer li.typer-num.is-OK {
    width: .8rem;
    margin-left: .1rem;
}

.typer li.typer-num.is-Del {
    width: 1rem;
}
 

    var main = new Vue({
        el: '#main',
        data: {
            showTyper: 0,    //輸入法的值，0表示不顯示，1表示顯示省輸入鍵盤，2表示顯示數字字母輸入鍵盤
            provinces:["京","滬","浙","蘇","粵","魯","晉","冀",    //省
                "豫","川","渝","遼","吉","黑","皖","鄂",
                "津","貴","雲","桂","瓊","青","新","藏",
                "蒙","寧","甘","陝","閩","贛","湘","關閉"],
            keyNums:["0","1","2","3","4","5","6","7","8","9",     //數字字母
                "Q","W","E","R","T","Y","U","I","O","P",
                "A","S","D","F","G","H","J","K","L",
                "OK","Z","X","C","V","B","N","M","Del"],
            carNumber:'',    //輸入的值

        },
        methods: {
            onOfferTap: function () {   //對最終結果進行判斷
                var carNumberReg = /^[京津滬渝冀豫雲遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陝吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學警港澳]{1}$/;
                if (!carNumberReg.test(this.carNumber)) {
                    _g.toast('請輸入正確的車牌號碼');
                    return;
                }
            },
            onTypewriting:function () {    //點選輸入框時，彈出鍵盤
                this.showTyper = 1;
                this.changeTyper();
            },
            changeTyper:function () {    //判斷輸入的車牌號處於什麼狀態，為空？已輸入第一個值（即省）？輸入省之後的值？
                if(this.carNumber.length>=1){
                    this.showTyper = 2;
                }
                if(this.carNumber.length==0){
                    this.showTyper = 1;
                }
            },
            input:function (item) {    //鍵盤點選事件，傳入鍵盤本身的值
                if(item=='OK'||item=='關閉'){    //判斷是否點選了關閉按鈕
                    this.showTyper = 0;
                    return;
                }
                if (item=='Del'){    //判斷是否點選了刪除按鈕
                    this.carNumber = this.carNumber.slice(0,-1);
                    this.changeTyper();
                    return;
                }
                if(this.carNumber.length<7){    //判斷當前的車牌號的數目是否合法，還未超出7位則可繼續輸入
                    this.carNumber=this.carNumber+item;
                    this.changeTyper();
                }else {
                    _g.alert('車牌號碼超出正常範圍');
                }
            }
        }
    });
 

尚未完善功能：

一般輸入的第二個必須是字母，在此還未對齊進行判斷