哈嘍，大家好，最近鵬仔開發的項目是學校校內車輛超速方面的統計檢測方面的系統，在開發過程中發現有個小功能，就是用戶移動端添加車牌號，剛開始想著就一個輸入框，提交時正則效驗一下格式就行，最后感覺不是很方便，所以就簡單自己手寫了一個H5車牌號軟鍵盤，由于每天工作比較忙，就沒封裝成插件了，趁著晚上空閑，給大家整理一下demo，復制即可使用，或者自行封裝一個組件調用也可以（代碼中一些寫法可能過于粗糙，時間有限，任務多，就粗糙寫一下吧，反正功能是實現了）。

功能如上圖所示，支持 8位電車車牌和7位油車車牌。

第一位是 省份，用戶點擊就會彈出省份軟鍵盤；

第二位是 字母，用戶點擊只能輸入字母；

第三、四、五、六位是字母和數字，不包含O；

第七位是 數字、字母、或者學、警之類漢字；

第八位是 電車選項。

用戶點擊軟鍵盤對應的按鍵時會高亮，這個是后期加的，所以上圖中沒有展示出來。

鵬仔的移動端是rem布局，根元素是26.67vw，如果你使用，可自行根據自己的項目將css中所有的單位變化一下。

body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,h1,h2,h3,h4,h5,h6,fieldset,img,input {margin:0;padding:0}
body,html {width:100%;height:100%;font-size: 26.67vw;}

完整代碼如下

<template><div class="layer"><!-- content --><div class="content-layer"><div class="my-car-layer"><!-- 添加車輛 --><div class="my-car-layer-add" @click="addShow = true"><div class="add-text"><p>添加車輛</p></div></div></div></div><!-- 添加車輛彈窗 --><div class="shade-layer" v-if="addShow" @click="keyboardShow = false"><div class="add-content"><div class="add-header"><p>車輛信息</p><span @click="addShow = false">關閉</span></div><div class="form-list"><p>車牌號：</p><div class="car-num-input"><div v-for="(item,index) in carNumList" :key="index" @click.stop="selectCarNum(index)" :class="(carIndex == index ? 'active' : '') + ' ' + (item ? 'status-key' : '')">{{ index == 0 && !item ? '省' : index == carNumList.length-1 && !item ? '新能源' : item }}</div></div></div><button class="submit-btn" @click="carSubmitBtn()" v-points>提交</button></div><!-- 車牌鍵盤 --><div class="keyboard-layer" v-if="keyboardShow" @click.stop=""><div class="keyboard-header"><span @click="keyboardShow = false">完成</span></div><!-- 省份鍵盤 --><div class="province-layer" v-if="carIndex == '0'"><span v-for="(item,index) in provinceList" :key="index" @click="keyboardBtn(item)" :class="activeKey == item ? 'active-hover' : ''">{{ item == 'del' ? '刪除' : item }}</span></div><!-- 數字字母鍵盤 --><div class="keyboard-item" v-if="carIndex != '0'"><div v-if="carIndex != '1'"><span v-for="(item,index) in keyboardList[0]" :key="index" @click="keyboardBtn(item)" :class="activeKey == item ? 'active-hover' : ''">{{ item }}</span></div><div><span v-for="(item,index) in keyboardList[1]" :key="index" @click="keyboardBtn(item)" :class="((item == 'O' && carIndex != '1') ? 'no-btn' : '') + ' ' + (activeKey == item ? 'active-hover' : '')">{{ item }}</span></div><div><span v-for="(item,index) in keyboardList[2]" :key="index" @click="keyboardBtn(item)" :class="activeKey == item ? 'active-hover' : ''">{{ item }}</span></div><div><span v-for="(item,index) in keyboardList[3]" :key="index" @click="keyboardBtn(item)" :class="activeKey == item ? 'active-hover' : ''">{{ item == 'del' ? '刪除' : item }}</span></div><div v-if="carIndex == carNumList.length-2"><span v-for="(item,index) in keyboardList[4]" :key="index" @click="keyboardBtn(item)" :class="activeKey == item ? 'active-hover' : ''">{{ item }}</span></div></div></div></div></div>
</template>
<script>
export default {name: "car",mixins: [],components: {},data() {return {addShow: false, // 添加車輛彈窗顯示隱藏formData: {carNumber: ''},carNumList: ['','','','','','','',''], // 車牌號數組activeKey: '', // 鍵盤按鍵選中激活timeoutId: null, // 定時器IDcarIndex: null, // 車牌號輸入光標索引keyboardShow: false, // 鍵盤顯示/隱藏provinceList: ['京', '津', '滬', '渝', '冀', '豫', '云', '遼', '黑', '湘','皖', '魯', '新', '蘇', '浙', '贛', '鄂', '桂', '甘', '晉','蒙', '陜', '吉', '閩', '貴', '粵', '青', '藏', '川', '寧','瓊', '使', '領', '學', '警', '掛', 'del'],keyboardList: [['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P'],['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],['Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del'],['學','警','港','澳']]};},mounted() {},methods: {// 添加車輛carSubmitBtn(){this.formData.carNumber = '';for(let i in this.carNumList){if(this.carNumList[i] == '' && i != this.carNumList.length-1){console.log('請輸入完整車牌號');return;}this.formData.carNumber += this.carNumList[i];}console.log(this.formData.carNumber)},// 點擊車牌號輸入selectCarNum(inx){this.carIndex = inx;if(!this.keyboardShow){this.keyboardShow = true;}},// 鍵盤輸入keyboardBtn(val){this.activeKey = val; // 鍵盤按鍵選中激活this.activeKeyBtn(); // 鍵盤按鍵激活定時器this.carNumList[this.carIndex] = val == 'del' ? '' : val;if(val == 'del' && this.carIndex > 0){this.carIndex--;}if(val != 'del' && this.carIndex < this.carNumList.length-1){this.carIndex++;}this.$forceUpdate();},// 鍵盤按鍵激活定時器activeKeyBtn() {// 清除之前的定時器if (this.timeoutId) clearTimeout(this.timeoutId)// 1秒后重置狀態this.timeoutId = setTimeout(() => {this.activeKey = '';}, 300)}},watch: {"addShow"(){// 關閉彈窗時重置if(!this.addShow){this.formData = {carNumber: ''}this.carIndex = ''; // 車牌號輸入光標索引this.carNumList = ['','','','','','','','']; // 車牌號數組this.keyboardShow = false; // 車牌鍵盤隱藏}}},
};
</script>
<style lang="scss" scoped>
.layer {padding: 0.22rem 0 0.64rem;box-sizing: border-box;.content-layer {width: 100%;position: relative;padding: 0 0.16rem;box-sizing: border-box;.my-car-layer{width: 100%;.my-car-layer-add{width: 100%;padding: 0.14rem 0.16rem;box-sizing: border-box;border-radius: 0.08rem;background: #FFF;display: flex;flex-direction: column;align-items: center;justify-content: center;.add-text{width: 100%;display: flex;align-items: center;justify-content: center;padding-top: 0.04rem;box-sizing: border-box;p{color: #2E59FD;font-family: "PingFang SC";font-size: 0.14rem;font-weight: 700;line-height: 0.2rem;}}}}}.shade-layer{position: fixed;top: 0;left: 0;z-index: 5;width: 100%;height: 100%;background: rgba(0,0,0,.4);padding: 0.16rem;box-sizing: border-box;display: flex;align-items: center;justify-content: center;.add-content{width: 100%;padding: 0.16rem 0.16rem 0.24rem;box-sizing: border-box;border-radius: 0.16rem;background: #FFF;.add-header{width: 100%;display: flex;align-items: center;justify-content: space-between;padding-bottom: 0.14rem;box-sizing: border-box;p{color: #000;font-family: "PingFang SC";font-size: 0.16rem;font-weight: 700;line-height: 0.22rem;}span{color: #0A61C5;font-family: "PingFang SC";font-size: 0.12rem;font-weight: 700;line-height: 0.24rem;cursor: pointer;}}.form-list{p{color: #6B7280;font-family: "PingFang SC";font-size: 0.14rem;font-weight: 500;line-height: 0.2rem;}input{display: block;font-size: 0.14rem;line-height: 0.2rem;width: 100%;border-radius: 0.08rem;border: none;background: #F5F7FA;padding: 0.12rem 0.16rem;box-sizing: border-box;}.car-num-input{width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 0.04rem 0;box-sizing: border-box;div{width: 0.3rem;height: 0.36rem;background: rgba(0,0,0,.05);border-radius: 0.04rem;border: 0.01rem solid transparent;box-sizing: border-box;display: flex;align-items: center;justify-content: center;color: #000;font-size: 0.14rem;line-height: 0.18rem;&:first-child{color: rgba(0,0,0,.5);}&:last-child{border: 0.01rem dashed rgba(27, 171, 80, 0.8);color: rgba(0,0,0,.5);font-size: 0.08rem;}}.active{border: 0.01rem solid rgba(48, 112, 255, 0.8)!important;}.status-key{color: #000!important;font-size: 0.14rem!important;line-height: 0.18rem!important;}}}.submit-btn{display: block;width: 100%;border: none;padding: 0.06rem 0.1rem;box-sizing: border-box;border-radius: 0.52rem;background: linear-gradient(90deg, #0FA6F6 1.1%, #198CFE 99.99%);color: #FFF;text-align: center;font-family: "PingFang SC";font-size: 0.16rem;font-weight: 700;line-height: 0.24rem;margin-top: 0.24rem;}}.keyboard-layer{width: 100%;background: #D0D5DC;padding: 0.08rem 0.04rem 0.16rem;box-sizing: border-box;position: absolute;bottom: 0;left: 0;.keyboard-header{width: 100%;display: flex;align-items: center;justify-content: flex-end;padding: 0 0.08rem 0.08rem;box-sizing: border-box;span{color: #2E59FD;font-family: "PingFang SC";font-size: 0.14rem;font-weight: 700;line-height: 0.28rem;cursor: pointer;}}.province-layer{width: 100%;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;span{color: #000;font-size: 0.14rem;line-height: 0.28rem;background: #fff;border-radius: 0.06rem;padding: 0.06rem 0.08rem;box-sizing: border-box;margin: 0.02rem;box-shadow: 0px 0.02rem 0.02rem 0px rgba(0, 0, 0, 0.1);}}.keyboard-item{width: 100%;div{display: flex;align-items: center;justify-content: center;span{color: #000;font-size: 0.14rem;line-height: 0.28rem;background: #fff;border-radius: 0.06rem;padding: 0.04rem 0.1rem;box-sizing: border-box;margin: 0.04rem;box-shadow: 0px 0.02rem 0.04rem 0px rgba(0, 0, 0, 0.3);}}}.no-btn{color: rgba(0,0,0,.4)!important;pointer-events: none;}.active-hover{background: #B3BAC7!important;}}}
}
</style>

原文：共享博客 sharedbk.comvue h5實現車牌號輸入框哈嘍，大家好，最近鵬仔開發的項目是學校校內車輛超速方面的統計檢測方面的系統，在開發過程中發現有個小功能，就是用戶移動端添加車牌號，剛開始想著就一個輸入框，提交時正則效驗一下格式就行，最后感覺不是很方便，所以就簡單自己手寫了一個H5車牌號軟鍵盤，由于每天工作比較忙，就沒封...,共享博客-(百變鵬仔)https://www.sharedbk.com/post/284.html