vue.js初學—DIY移動端輸入鍵盤，vue.js初學diy鍵盤

vue.js初學—DIY移動端輸入鍵盤，vue.js初學diy鍵盤

在項目開發的過程中呢，我們需要使用者輸入一些東西，但又不願意讓使用者隨意的進行輸入，因而可能會選擇使用一個自訂的IME，來限制使用者輸入的東西，那麼接下來，我們就通過一個簡單的例子，來看看，移動端網頁中，IME該怎麼去設定。這裡我們依舊使用了我們的老朋友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>

①這裡的v-touch:tap，是做好的一個觸發點擊事件用的，可以理解為v-on:click；其次在這個input裡面呢，會有一個readonly，這個是讓這個input唯讀，從而做到點擊的時候無法彈出系統中的IME鍵盤

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

③輸入鍵盤是否彈出，以及彈出什麼輸入鍵盤，是由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;}

主要是最後的幾個含有“is-”的幾個類，對我們的鍵盤做一個美化的作用，而在上面的html中，我們也用v-bind:class對齊做了判斷和綁定，接下來重頭戲來了，JS部分

    var main = new Vue({        el: '#main',        data: {            showTyper: 0,    //IME的值，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('車牌號碼超出正常範圍');                }            }        }    });

js裡的代碼都已提供了注釋，方便理解，不再一一贅述，大致的效果如下，因為是從實際的項目中截取下來，稍微會有許些偏差

尚未完善功能：

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

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。 http://blog.csdn.net/Yvan_Lin/article/details/79154802