微信小程序使用車牌號(hào)輸入法的示例代碼
更新時(shí)間：2019年08月20日 10:05:50 作者：ZJW0215
這篇文章主要介紹了微信小程序使用車牌號(hào)輸入法的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在做小程序時(shí)，做了一個(gè)關(guān)于車的項(xiàng)目，然后需要添加車輛信息、添加車牌號(hào)，使用車牌鍵盤輸入，當(dāng)時(shí)我把這個(gè)需求給砍了，然后在添加車輛信息時(shí)，老大看到數(shù)據(jù)庫里我亂填的車牌號(hào)，又讓我把他加上了^o^
1.效果圖
2.相關(guān)代碼使用組件形式實(shí)現(xiàn)鍵盤輸入
組件代碼index.wxml
<view class="carPlate" wx:if="{{show}}">
<block wx:if="{{type==1}}">
<view class="wordList">
<view class="wordItem" wx:for="{{cityKeyword1}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{cityKeyword2}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{cityKeyword3}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{cityKeyword4}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
</view>
</block>
<block wx:else>
<view class="wordList">
<view class="wordItem" wx:for="{{keyNumber}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{wordList1}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{wordList2}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
<view class="wordItem wordClear" bindtap="handleClick" data-item="delete">
<image src="/images/input-clear.png" class="clearImg"></image>
</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{wordList3}}" wx:key="{{item}}" bindtap="handleClick" data-item="{{item}}">{{item}}</view>
<view class="wordItem wordConfirm" bindtap="handleClick" data-item="confirm">確定</view>
</view>
</block>
</view>
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.js
Component({
properties: {
type: {
type: Number,
default: 1,
},
show: {
type: Boolean,
default: false,
}
},
data: {
cityKeyword1: '京滬浙蘇粵魯晉冀豫',
cityKeyword2: '川渝遼吉黑皖鄂湘贛',
cityKeyword3: '閩陜甘寧蒙津貴云',
cityKeyword4: '桂瓊青新藏港澳臺(tái)',
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.父組件引入
我想實(shí)現(xiàn)點(diǎn)擊輸入后有上拉的效果，開始我想使用offset來實(shí)現(xiàn)的，但是下班后洗衣服想了下，不太好實(shí)現(xiàn)，我就想到了我以前做購物車時(shí)，有用到transform，原理差不多，我就把他用上了
然后就是點(diǎn)擊鍵盤外實(shí)現(xiàn)收起鍵盤，開始我想到的就是在父組件的最外層定義關(guān)閉事件，父級(jí)里面的盒子都使用catch方法阻止冒泡，但想下阻止冒泡好像又有點(diǎn)不合情理，就又把阻止冒泡給去掉了
父組件index.wxml
<view class="container" bindtap="handlePlateConfirm">
<view class="translateView" style="transform: translateY({{translateSpace}}px)">
<view class="list">
<view class="item">
<view class="label">*車牌號(hào)碼</view>
<view class="contentBox" catchtap="handleClick">
<view class="inputBox" wx:if="{{carNo}}">{{carNo}}</view>
<view class="promptText" wx:else>請(qǐng)輸入車牌號(hào)</view>
</view>
</view>
</view>
</view>
</view>
<car-plate show="{{showPlateInput}}" bindchange="handlePlateChange" type="{{inputType}}" bindconfirm="handlePlateConfirm" binddelete="handlePlateDelete" />
父組件index.js
Page({
data: {
carNo: '',
translateSpace: 0,
inputType: 1, // 車牌輸入類型，1簡稱，2數(shù)字或者字母,
showPlateInput: false,
},
/* 用于點(diǎn)擊彈出鍵盤輸入，space為鍵盤彈出后向上拉取的距離 */
handleClick(e) {
/* 150為鍵盤的高度 */
let space = -(e.currentTarget.offsetTop - 150);
/* regExp用于判斷當(dāng)前已輸入的車牌號(hào)是否是中文，并讓鍵盤顯示中文還是英文輸入 */
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
})
},
/* 點(diǎn)擊鍵盤上的確定 */
handlePlateConfirm() {
/* isCarPlate用于判斷輸入的車牌號(hào)是否符合規(guī)范 */
if (!this.isCarPlate(this.data.carNo)) {
wx.showToast({
title: '請(qǐng)輸入正確的車牌號(hào)',
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,
})
},
/* 判斷車牌號(hào) */
isCarPlate(value) {
return /^(([京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9掛學(xué)警港澳使領(lǐng)]))$/.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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
實(shí)現(xiàn)了六款簡單常見HTML5 Canvas特效濾鏡，并且封裝成一個(gè)純JavaScript可調(diào)用的API文件gloomyfishfilter.js，程序源代碼如下，感興趣的朋友可以參考下哈2013-06-06
JavaScript實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的生成
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的生成，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
input輸入框限制只能輸入數(shù)字的方法實(shí)例(個(gè)人認(rèn)為最好的)
在很多業(yè)務(wù)中需要對(duì)輸入框進(jìn)行字符限制,比如金額輸入框、手機(jī)號(hào)碼輸入框等,下面這篇文章主要給大家介紹了關(guān)于input輸入框限制只能輸入數(shù)字的相關(guān)資料,文中介紹的方法個(gè)人認(rèn)為最好的,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript事件處理程序的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
JS sort方法基于數(shù)組對(duì)象屬性值排序
這篇文章主要介紹了JS sort方法基于數(shù)組對(duì)象屬性值排序,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)文字滾動(dòng)效果，類似于新聞板塊中的公示公告，，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
下面小編就為大家?guī)硪黄唵握務(wù)刯s的數(shù)據(jù)類型。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了javascript 作用于作用域鏈的詳解的相關(guān)資料,希望通過本文能幫助到大家，理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了ChatGPT?之?Fetch請(qǐng)求的內(nèi)容解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
javascript和jQuery中的AJAX技術(shù)詳解【包含AJAX各種跨域技術(shù)】
這篇文章主要介紹了javascript和jQuery中的AJAX技術(shù),結(jié)合實(shí)例形式分析了javascript與jQuery中ajax的實(shí)現(xiàn)方法以及AJAX各種跨域技術(shù)的原理與操作技巧,需要的朋友可以參考下2016-12-12