在做小程序時，做了一個關于車的項目，然后需要添加車輛信息、添加車牌號，使用車牌鍵盤輸入，當時我把這個需求給砍了，然后在添加車輛信息時，老大看到數(shù)據(jù)庫里我亂填的車牌號，又讓我把他加上了^o^1、效果圖2.相關代碼使用組件形式實現(xiàn)鍵盤輸入組件代碼index.wxml{
{
item}
}
{
{
item}
}
{
{
item}
}
{
{
item}
}
{
{
item}
}
{
{
item}
}
{
{
item}
}
{
{
item}
}
確定index.css.carPlate{
position: fixed;
padding: 12rpx 12rpx 30rpx;
left: 0;
bottom: 0;
width: 100%;
/* height: 150px;
*/ font-size: 30rpx;
background: #fff;
box-sizing: border-box;
border-top: 1px solid rgb(211, 207, 207);
z-index: 200;
}
.wordList{
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.wordItem{
margin: 5rpx;
width: 70rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
border: 1px solid #eee;
border-radius: 10rpx;
}
.wordConfirm{
width: 130rpx;
color: #fff;
background: #473af0;
}
.wordClear{
width: 100rpx;
}
.clearImg{
width: 60rpx;
height: 60rpx;
vertical-align: middle;
}
index.jsComponent({
properties: {
type: {
type: Number, default: 1, }
, show: {
type: Boolean, default: false, }
}
, data: {
cityKeyword1: '
京滬浙蘇粵魯晉冀豫'
, cityKeyword2: '
川渝遼吉黑皖鄂湘贛'
, cityKeyword3: '
閩陜甘寧蒙津貴云'
, cityKeyword4: '
桂瓊青新藏港澳臺'
, keyNumber: '
1234567890'
, wordList1: '
QWERTYUIOP'
, wordList2: '
ASDFGHJKL'
, wordList3: '
ZXCVBNM'
, }
, methods: {
handleClick(e) {
let value = e.currentTarget.dataset.item;
let type = e.currentTarget.dataset.type;
switch(value) {
case '
confirm'
: this.triggerEvent('
confirm'
);
break;
case '
delete'
: this.triggerEvent('
delete'
);
break;
default: this.triggerEvent('
change'
, {
value, type }
);
}
}
}
}
)3.父組件引入我想實現(xiàn)點擊輸入后有上拉的效果，開始我想使用offset來實現(xiàn)的，但是下班后洗衣服想了下，不太好實現(xiàn)，我就想到了我以前做購物車時，有用到transform，原理差不多，我就把他用上了然后就是點擊鍵盤外實現(xiàn)收起鍵盤，開始我想到的就是在父組件的最外層定義關閉事件，父級里面的盒子都使用catch方法阻止冒泡，但想下阻止冒泡好像又有點不合情理，就又把阻止冒泡給去掉了父組件index.wxml*車牌號碼{
{
carNo}
}
請輸入車牌號父組件index.jsPage({
data: {
carNo: '
'
, translateSpace: 0, inputType: 1, // 車牌輸入類型，1簡稱，2數(shù)字或者字母, showPlateInput: false, }
, /* 用于點擊彈出鍵盤輸入，space為鍵盤彈出后向上拉取的距離 */ handleClick(e) {
/* 150為鍵盤的高度 */ let space = -(e.currentTarget.offsetTop - 150);
/* regExp用于判斷當前已輸入的車牌號是否是中文，并讓鍵盤顯示中文還是英文輸入 */ let regExp = /^[u4e00-u9fa5]+/;
let inputType = 1;
if(regExp.test(this.data.carNo)) {
inputType = 2;
}
this.setData({
translateSpace: space, showPlateInput: true, inputType }
) }
, /* 鍵盤輸入操作 */ handlePlateChange(e) {
let value = e.detail.value;
let type = e.detail.type;
let carNo = this.data.carNo;
carNo += value;
if(type == 1) {
this.setData({
inputType: 2 }
) }
this.setData({
carNo }
) }
, /* 點擊鍵盤上的確定 */ handlePlateConfirm() {
/* isCarPlate用于判斷輸入的車牌號是否符合規(guī)范 */ if (!this.isCarPlate(this.data.carNo)) {
wx.showToast({
title: '
請輸入正確的車牌號'
, icon: '
none'
, duration: 2000 }
) return false;
}
this.setData({
translateSpace: 0, showPlateInput: false, inputType: 1 }
) }
, /* 用于鍵盤輸入刪除 */ handlePlateDelete(e) {
let carNo = this.data.carNo;
carNo = carNo.substring(0, carNo.length - 1);
if(carNo.length == 0) {
this.setData({
inputType: 1 }
) }
this.setData({
carNo, }
) }
, /* 判斷車牌號 */ isCarPlate(value) {
return /^(([京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領][A-Z](([0-9]{
5}
[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{
4}
)))|([京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領][A-Z][A-HJ-NP-Z0-9]{
4}
[A-HJ-NP-Z0-9掛學警港澳使領]))$/.test(value);
}
}
)父組件index.css.container{
height: 100vh;
background: #fff;
}
.translateView{
background: #eee;
}
.list{
margin-bottom: 20rpx;
background: #fff;
}
.list:last-child{
margin: 0;
}
.item{
display: flex;
padding: 0 26rpx;
width: 100%;
height: 116rpx;
box-sizing: border-box;
align-items: center;
border-bottom: 1px solid #eee;
}
.item:last-child{
border: none;
}
.label{
margin-right: 10rpx;
width: 140rpx;
}
.contentBox{
display: flex;
width: calc(100% - 150rpx);
height: 90rpx;
align-items: center;
justify-content: space-between;
}
.promptText{
color: #c7c7c7;
}
.inputBox{
width: 100%;
height: 80rpx;
line-height: 80rpx;
}
正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）推薦教程：
《微信小程序》以上就是微信小程序怎么使用車牌號輸入法的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！
微信
分享相關標簽：
微信小程序 javascript本文轉(zhuǎn)載于：
segmentfault，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
用mpvue開發(fā)微信小程序基礎知識
下一篇：
改進異步封裝：
處理帶返回值的異步調(diào)用 - 邊城客棧相關文章相關視頻微信小程序wx.request請求數(shù)據(jù)報錯微信小程序加載失敗是什么原因？微信小程序開發(fā)初次體驗微信小程序常見的開發(fā)問題匯總微信小程序怎么使用車牌號輸入法深入了解微信小程序(二)深入了解微信小程序(三)深入了解微信小程序(四) [溫州做小程序]