實現(xiàn)輸入車牌號功能，I是在車牌號里不能輸入得，在鍵盤上就沒有展示，O是只在第二位上可以輸入，
wxml
<view class="carNumber-items">
<view class="carNumber-items-box" bindtap='openKeyboard'>
<view class="carNumber-items-province carNumber-items-box-list">{{carnum[0] || ''}}</view>
<view class="carNumber-items-En carNumber-items-box-list">{{carnum[1] || ''}}</view>
</view>
<!-- 常規(guī) -->
<view class="carNumber-item" bindtap='openKeyboard'>{{carnum[2] || ''}}</view>
<view class="carNumber-item" bindtap='openKeyboard'>{{carnum[3] || ''}}</view>
<view class="carNumber-item" bindtap='openKeyboard'>{{carnum[4] || ''}}</view>
<view class="carNumber-item" bindtap='openKeyboard'>{{carnum[5] || ''}}</view>
<view class="carNumber-item" bindtap='openKeyboard'>{{carnum[6] || ''}}</view>
<view class="carNumber-item {{carnum.length > 7? '': 'carNumber-item-newpower'}}" bindtap='openKeyboard'>{{carnum[7] || '新能源'}}</view>
</view>
</view>
<!-- 虛擬鍵盤 -->
<view class="keyboard" hidden='{{!KeyboardState}}'>
<view class="keyboardClose">
<view class="keyboardClose_btn" bindtap='closeKeyboard'>關(guān)閉</view>
</view>
<!-- 省份簡寫鍵盤 -->
<view class="keyboard-item" hidden="{{carnum[0]}}">
<view class="keyboard-line" wx:for="{{provinces}}" wx:key="{{index}}">
<view class="keyboard-btn" wx:for="{{item}}" wx:key="{{index}}" data-val="{{itemlist}}" wx:for-item="itemlist" bindtap='bindChoose'>{{itemlist}}</view>
</view>
<view class="keyboard-del" bindtap='bindDelChoose'>
清除
</view>
</view>
<!-- 車牌號碼選擇鍵盤 -->
<view class="keyboard-item iscarnumber" hidden="{{!carnum[0]}}">
<view class="keyboard-line {{provinces?'grey-line':''}}" wx:for="{{numbers}}" wx:key="{{index}}">
<view class="keyboard-btn {{(!carnum[1] && numbers[1]== item) || (!carnum[5]&&numbers[0] == item) ||(carnum[6]&&numbers[0] == item) ||(carnum[1] &&itemlist == 'O') ?'keyboard-btn-gery':''}}" wx:for="{{item}}" wx:key="{{index}}" data-val="{{itemlist}}" wx:for-item="itemlist" bindtap='bindChoose'>{{itemlist}}</view>
</view>
<view class="keyboard-del" bindtap='bindDelChoose'>
清除
</view>
</view>
</view>
wxss
/* 虛擬鍵盤 */
.keyboard {
height: auto;
background: #d1d5d9;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
}
.keyboard-item {
padding: 10rpx 0 5rpx 0;
position: relative;
display: block;
}
/* 關(guān)閉虛擬鍵盤 */
.keyboardClose {
height: 70rpx;
background-color: #f7f7f7;
overflow: hidden;
}
.keyboardClose_btn {
float: right;
line-height: 70rpx;
font-size: 15px;
padding-right: 30rpx;
}
/* 虛擬鍵盤-省縮寫 */
/* 虛擬鍵盤-行 */
.keyboard-line {
margin: 0 auto 30rpx;
text-align: center;
}
.iscarnumber .keyboard-line {
text-align: center;
margin-left: 5rpx;
}
/* 虛擬鍵盤-單個按鈕 */
.keyboard-btn {
font-size: 17px;
color: #333333;
background: #fff;
display: inline-block;
padding: 18rpx 0;
width: 63rpx;
text-align: center;
box-shadow: 0 2rpx 0 0 #999999;
border-radius: 10rpx;
margin: 5rpx 6rpx;
}
/* 虛擬鍵盤-刪除按鈕 */
.keyboard-del {
font-size: 17px;
color: #333333;
background: #A7B0BC;
display: inline-block;
padding: 15rpx 55rpx;
box-shadow: 0 2rpx 0 0 #999999;
border-radius: 10rpx;
margin: 5rpx;
position: absolute;
bottom: 37rpx;
right: 6rpx;
}
.keyboard-del-font {
font-size: 25px;
width:40rpx;
height:40rpx;
display: block;
}
/* 車牌號碼 */
.carNumber-items {
text-align: center;
display: flex;
align-items: center;
}
.carNumber-items-box {
display: flex;
vertical-align: middle;
position: relative;
margin-right: 30rpx;
}
.carNumber-items-box-list {
text-align: center;
display: inline-block;
font-size: 38rpx;
font-family: PingFang;
font-weight: bold;
color: #2D2D2D;
vertical-align: middle;
}
.carNumber-items-province {
/* border-right: 1rpx solid #ccc; */
width: 100rpx;
height: 82rpx;
background: #F9F9F9;
line-height: 82rpx;
border-radius: 5rpx;
}
.carNumber-items-En{
margin-left: 8rpx;
width: 73rpx;
height: 82rpx;
background: #F9F9F9;
line-height: 82rpx;
border-radius: 5rpx;
}
.carNumber-items-box::after {
content: "";
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background-color: #2D2D2D;
position: absolute;
right: -22rpx;
top: 40rpx;
}
.carNumber-item {
margin-left: 8rpx;
width: 73rpx;
height: 82rpx;
background: #F9F9F9;
line-height: 82rpx;
border-radius: 5rpx;
font-size: 38rpx;
font-family: PingFang;
font-weight: bold;
color: #2D2D2D;
}
/* 新能源 */
.carNumber-item-newpower {
background: #DAF6EA;
font-size: 18rpx;
font-family: PingFang;
font-weight: 500;
color: #01DC84;
}
.carNumber-newpower-add {
font-size: 18px;
}
/* 確認按鈕 */
.carNumberBtn {
border-radius: 4rpx;
margin: 80rpx 40rpx;
}
.carNumber{
margin-bottom: 50rpx;
}
.keyboard-btn-gery{
color:#e4e7ec;
}
js data鍵盤信息是寫死得
numbers: [
["港", "澳", "學(xué)","警","領(lǐng)"],
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
["A", "B", "C", "D", "E", "F", "G", "H","O","J",],
["K","L", "M", "N", "P", "Q", "R", "S", "T","U"],
["V","W", "X", "Y", "Z"],
],
provinces: [
['京', '滬', '粵', '津', '冀', '晉', '蒙', '遼', '吉', '黑'],
['蘇', '浙', '皖', '閩', '贛', '魯', '豫', '鄂', '湘'],
['桂', '瓊', '渝', '川', '貴', '云', '藏','陜','甘'],
['青', '寧', '新','港','澳'],,
],
KeyboardState: false,
addCarNumber 是保存接口了
bindChoose(e) {
// 第2位置鍵盤第兩排不可點（數(shù)字鍵盤），除第2位置O不可點，除第6位置鍵盤第1排都不可點（港）
if((!this.data.carnum[1] && this.data.numbers[1].indexOf(e.currentTarget.dataset.val) > -1) || (!this.data.carnum[5]&&this.data.numbers[0].indexOf(e.currentTarget.dataset.val) >-1) ||(this.data.carnum[6]&&this.data.numbers[0].indexOf(e.currentTarget.dataset.val) >-1) ||(this.data.carnum[1] &&e.currentTarget.dataset.val == 'O') ){
} else {
if (!this.data.carnum[7]) {
var arr = [];
arr[0] = e.target.dataset.val;
this.data.carnum = this.data.carnum.concat(arr)
this.setData({
carnum: this.data.carnum
})
}
}
},
bindDelChoose() {
if (this.data.carnum.length != 0) {
this.data.carnum.splice(this.data.carnum.length - 1, 1);
this.setData({
carnum: this.data.carnum
})
}
},
submitNumber() {
var that = this;
if(!that.data.editStatus){
if (that.data.carnum[6] || that.data.carnum[7]) {
var number;
if (that.data.carnum[7]) {
number = that.data.carnum[0] + that.data.carnum[1] + that.data.carnum[2] + that.data.carnum[3] + that.data.carnum[4] + that.data.carnum[5] + that.data.carnum[6] + that.data.carnum[7];
that.addCarNumber(number);
} else{
number = that.data.carnum[0] + that.data.carnum[1] + that.data.carnum[2] + that.data.carnum[3] + that.data.carnum[4] + that.data.carnum[5] + that.data.carnum[6] ;
that.addCarNumber(number);
}
} else {
wx.showToast({
title: '請?zhí)顚懲暾能嚺铺柎a',
icon: "none",
duration: 2000
})
return
}
} else {
that.addCarNumber()
}
},
h5 版的文章來源：http://www.zghlxwxcb.cn/news/detail-860144.html
<template>
<div>
<div class="carNumber">
<div class="weui-cells__title"></div>
<!-- 車牌號頭兩位 -->
<div class="carNumber-items">
<div class="carNumber-items-box" @click='openKeyboard'>
<div class="carNumber-items-province carNumber-items-box-list">{{carnum[0] || ''}}</div>
<div class="carNumber-items-En carNumber-items-box-list">{{carnum[1] || ''}}</div>
</div>
<!-- 常規(guī) -->
<div class="carNumber-item" @click='openKeyboard'>{{carnum[2] || ''}}</div>
<div class="carNumber-item" @click='openKeyboard'>{{carnum[3] || ''}}</div>
<div class="carNumber-item" @click='openKeyboard'>{{carnum[4] || ''}}</div>
<div class="carNumber-item" @click='openKeyboard'>{{carnum[5] || ''}}</div>
<div class="carNumber-item" @click='openKeyboard'>{{carnum[6] || ''}}</div>
<div class="carNumber-item " :class="{ 'carNumber-item-newpower': carnum.length <= 7 }" @click='openKeyboard'>{{carnum[7] || '新能源'}}</div>
</div>
</div>
<!-- 虛擬鍵盤 -->
<div class="keyboard" v-if='KeyboardState'>
<div class="keyboardClose">
<div class="keyboardClose_btn" @click='closeKeyboard'>關(guān)閉</div>
</div>
<!-- 省份簡寫鍵盤 -->
<div class="keyboard-item" v-if="!carnum[0]">
<div class="keyboard-line" v-for="(item,index) in provinces" :key="index">
<div class="keyboard-btn" v-for="(itemlist,index) in item" :key="index" @click='bindChoose(itemlist)'>{{itemlist}}</div>
</div>
<div class="keyboard-del" @click='bindDelChoose'>
清除
</div>
</div>
<!-- 車牌號碼選擇鍵盤 -->
<div class="keyboard-item iscarnumber" v-if="carnum[0]">
<div class="keyboard-line" :class="{ 'grey-line': provinces }" v-for="(item,index) in numbers" :key="index">
<div class="keyboard-btn " :class="{'keyboard-btn-gery':(!carnum[1] && numbers[1]== item) || (!carnum[5]&&numbers[0] == item) ||(carnum[6]&&numbers[0] == item) ||(carnum[1] &&itemlist == 'O')}" v-for="(itemlist,index) in item" :key="index" @click='bindChoose(itemlist)'>{{itemlist}}</div>
</div>
<div class="keyboard-del" @click='bindDelChoose'>
清除
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
columnsIndex: 0,
// 省份簡寫
provinces: [
['京', '滬', '粵', '津', '冀', '晉', '蒙', '遼', '吉', '黑'],
['蘇', '浙', '皖', '閩', '贛', '魯', '豫', '鄂', '湘'],
['桂', '瓊', '渝', '川', '貴', '云', '藏', '陜', '甘'],
['青', '寧', '新', '港', '澳'],
],
// 車牌輸入
numbers: [
["港", "澳", "學(xué)", "警", "領(lǐng)"],
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
["A", "B", "C", "D", "E", "F", "G", "H", "O", "J",],
["K", "L", "M", "N", "P", "Q", "R", "S", "T", "U"],
["V", "W", "X", "Y", "Z"],
],
carnum: [],
showNewPower: false,
KeyboardState: false,
id: '',//編輯車輛id
carNumber: '',
}
},
/**
* 組件的方法列表
*/
created() {
},
methods: {
bindChoose(e) {
// 第2位置鍵盤第兩排不可點（數(shù)字鍵盤），除第2位置O不可點，除第6位置鍵盤第1排都不可點（港）
if ((!this.carnum[1] &&this.numbers[1].indexOf(e) > -1) || (!this.carnum[5] &&this.numbers[0].indexOf(e) > -1) || (this.carnum[6] &&this.numbers[0].indexOf(e) > -1) || (this.carnum[1] && e == 'O')) {
if (!this.carnum[0]) {
if (!this.carnum[7]) {
var arr = [];
arr[0] = e;
this.carnum =this.carnum.concat(arr)
}
}
} else {
if (!this.carnum[7]) {
var arr = [];
arr[0] = e;
this.carnum =this.carnum.concat(arr)
}
}
},
bindDelChoose() {
if (this.carnum.length != 0) {
this.carnum.splice(this.carnum.length - 1, 1);
}
},
showPowerBtn() {
this.showNewPower = true;
this.KeyboardState = true;
},
closeKeyboard() {
this.KeyboardState = false;
this.showNewPower = false;
// this.carnum = []
},
openKeyboard() {
this.KeyboardState = true;
},
// 提交車牌號碼
submitNumber() {
var that = this;
if (that.carnum[6] || that.carnum[7]) {
var number;
if (that.carnum[7]) {
number = that.carnum[0] + that.carnum[1] + that.carnum[2] + that.carnum[3] + that.carnum[4] + that.carnum[5] + that.carnum[6] + that.carnum[7];
return number;
} else {
number = that.carnum[0] + that.carnum[1] + that.carnum[2] + that.carnum[3] + that.carnum[4] + that.carnum[5] + that.carnum[6];
return number;
}
} else {
wx.showToast({
title: '請?zhí)顚懲暾能嚺铺柎a',
icon: "none",
duration: 2000
})
return false
}
},
assignmentCarNum() {
if (this.carInfo.length > 0) {
this.carnum = this.carInfo
}
}
}
}
</script>
<style scoped>
.weui-cells__title {
margin-top: 0.77em;
margin-bottom: .3em;
padding-left: 0.15rem;
padding-right: 0.15rem;
color: #999;
font-size: 0.14rem;
}
/* 虛擬鍵盤 */
.keyboard {
height: auto;
background: #d1d5d9;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
z-index: 9;
}
.keyboard-item {
padding: 0.10rem 0 0.05rem 0;
position: relative;
display: block;
}
/* 關(guān)閉虛擬鍵盤 */
.keyboardClose {
height: 0.70rem;
background-color: #f7f7f7;
overflow: hidden;
}
.keyboardClose_btn {
float: right;
line-height: 0.70rem;
font-size: 0.15rem;
padding-right: 0.30rem;
}
/* 虛擬鍵盤-省縮寫 */
/* 虛擬鍵盤-行 */
.keyboard-line {
margin: 0 auto 0.30rem;
text-align: center;
}
.iscarnumber .keyboard-line {
text-align: center;
margin-left: 0.05rem;
}
/* 虛擬鍵盤-單個按鈕 */
.keyboard-btn {
font-size: 0.17rem;
color: #333333;
background: #fff;
display: inline-block;
padding: 0.18rem 0;
width: 0.6rem;
text-align: center;
box-shadow: 0 0.02rem 0 0 #999999;
border-radius: 0.10rem;
margin: 0.05rem 0.06rem;
}
/* 虛擬鍵盤-刪除按鈕 */
.keyboard-del {
font-size: 0.17rem;
color: #333333;
background: #A7B0BC;
display: inline-block;
padding: 0.15rem 0.55rem;
box-shadow: 0 0.02rem 0 0 #999999;
border-radius: 0.10rem;
margin: 0.05rem;
position: absolute;
bottom: 0.37rem;
right: 0.06rem;
}
.keyboard-del-font {
font-size: 0.25rem;
width:0.40rem;
height:0.40rem;
display: block;
}
/* 車牌號碼 */
.carNumber-items {
text-align: center;
display: flex;
align-items: center;
}
.carNumber-items-box {
display: flex;
vertical-align: middle;
position: relative;
margin-right: 0.30rem;
}
.carNumber-items-box-list {
text-align: center;
display: inline-block;
font-size: 0.38rem;
font-family: PingFang;
font-weight: bold;
color: #2D2D2D;
vertical-align: middle;
}
.carNumber-items-province {
/* border-right: 1rem solid #ccc; */
width: 1.00rem;
height: 0.82rem;
background: #F9F9F9;
line-height: 0.82rem;
border-radius: 0.05rem;
}
.carNumber-items-En{
margin-left: 0.08rem;
width: 0.73rem;
height: 0.82rem;
background: #F9F9F9;
line-height: 0.82rem;
border-radius: 0.05rem;
}
.carNumber-items-box::after {
content: "";
width: 0.08rem;
height: 0.08rem;
border-radius: 50%;
background-color: #2D2D2D;
position: absolute;
right: -0.22rem;
top: 0.40rem;
}
.carNumber-item {
margin-left: 0.08rem;
width: 0.73rem;
height: 0.82rem;
background: #F9F9F9;
line-height: 0.82rem;
border-radius: 0.05rem;
font-size: 0.38rem;
font-family: PingFang;
font-weight: bold;
color: #2D2D2D;
}
/* 新能源 */
.carNumber-item-newpower {
background: #DAF6EA;
font-size: 0.18rem;
font-family: PingFang;
font-weight: 500;
color: #01DC84;
}
.carNumber-newpower-add {
font-size: 18rem;
}
/* 確認按鈕 */
.carNumberBtn {
border-radius: 0.04rem;
margin: 0.80rem 0.40rem;
}
.carNumber{
margin: 0.50rem auto;
}
.input-flex{
display: flex;
align-items: center;
}
.weui-input{
margin-top: 0.23rem;
width: calc(100% - 0.90rem);
height: 0.70rem;
line-height: 0.70rem;
padding-left: 0.18rem;
background: #F9F9F9;
border-radius: 0.05rem;
font-size: 0.23rem;
font-family: PingFang;
font-weight: 500;
}
.input-text{
margin-left: 0.10rem;
line-height: 0.70rem;
text-align: right;
color: #2D2D2D;
font-size: 0.30rem;
font-family: PingFang;
font-weight: 500;
margin-top: 0.23rem;
}
.car-bom{
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 160rem;
background: #FFFFFF;
display: flex;
justify-content: center;
padding-top: 0.17rem;
}
.car-add-btn{
width: 5.50rem;
height: 0.70rem;
background: #F2270C;
border-radius: 0.35rem;
text-align: center;
color: #fff;
line-height: 0.70rem;
font-size: 0.26rem;
}
.car-code{
color: #2D2D2D;
font-size: 0.26rem;
font-family: PingFang;
font-weight: 500;
margin-bottom: 0.20rem;
}
.keyboard-btn-gery{
color:#e4e7ec;
}
</style>
文章來源地址http://www.zghlxwxcb.cn/news/detail-860144.html
到了這里，關(guān)于微信小程序?qū)崿F(xiàn)車牌號輸入自定義鍵盤的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
