微信小程序中實(shí)現(xiàn)車牌輸入功能
前言
哈哈哈，上新文章啦。好久沒(méi)有更新啦，今天乘著休息來(lái)總結(jié)下之前用的到自定義鍵盤來(lái)輸入車輛號(hào)牌微信組件。下面是效果圖，請(qǐng)欣賞：
背景
近期做了一個(gè)和車有關(guān)的項(xiàng)目，有車肯定就有車牌，我們都知道車牌是有一定規(guī)律的，如果簡(jiǎn)單的給個(gè)輸入框的話。。。。。。這里省略一萬(wàn)字哈，從小我的編程老師告訴我不要相信任何用戶輸入的東西。嗯嗯！現(xiàn)在想想還真的是這樣，總有一些別具一格的用戶就喜歡反著來(lái)，也不知道是真不懂還是搞破壞哈。還有個(gè)老師告訴我永遠(yuǎn)要把用戶當(dāng)SB，雖然自己也是用戶，感覺(jué)不好，但是話糙理不糙啊，因?yàn)槟阌肋h(yuǎn)不知道使用你寫的東西的是什么。。。。。（甚至是不是人）。在這樣的背景下你說(shuō)要讓用戶輸入一個(gè)正確的車牌號(hào)，那可真是比登天還難啊，太南了，臣妾做不到啊。
大猜想
既然這樣哈，我們自己也來(lái)當(dāng)一回用戶看看大概有什么情況發(fā)生哈，來(lái)咯，不要走開(kāi)哦，下面就是發(fā)揮用戶腦洞的時(shí)候了。
- 我a.12345
- 鄂a.ii111
- Xa.6666666
- za.哈哈哈哈哈
- 。。。。。。
哇哦，估計(jì)寫一天都寫不完呢，后面看大家的啦，這里有一個(gè)前提就是咱不考慮以英文開(kāi)頭的車牌，如果需要考慮大家可以舉一反三啦。
找規(guī)律
其實(shí)沒(méi)啥規(guī)律可找的，直接上百度一搜就知道車牌的規(guī)則。前面是省份簡(jiǎn)稱，第二位是字母，后面是字母和數(shù)字的混合，這里有幾個(gè)特殊的就是教練車、港澳車進(jìn)大陸、領(lǐng)事館的車。另外字母和字母o和數(shù)字1和0不好辨認(rèn)，所以字母i和字母o去掉了，最后規(guī)律就有了。
結(jié)構(gòu)和樣式
知道規(guī)律后就可以開(kāi)始動(dòng)手操作了，先看看設(shè)計(jì)圖的鍵盤布局：
上面圖片是省份簡(jiǎn)稱鍵盤布局
上面圖片是第二位字母鍵盤布局
上面圖片是后面幾位的鍵盤布局
下面就根據(jù)這幾個(gè)布局來(lái)寫結(jié)構(gòu)了：
<view class="keyboard" wx:if="{{isShow}}">
<view class="item">
<view wx:for="{{dataArr1}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
</view>
<view class="item">
<view wx:for="{{dataArr2}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
</view>
<view class="item">
<view wx:for="{{dataArr3}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
</view>
<view class="item" wx:if="{{dataArr4.length}}">
<view wx:for="{{dataArr4}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
</view>
<view class="delbtn" bindtap="delKey" wx:if="{{keyType == 'carlicense'}}"><image src="./icon_del.png"></image></view>
</view>
<view class="mask" bindtap="hideKeyBoard" wx:if="{{isShow}}"></view>
分別把數(shù)據(jù)放入四個(gè)數(shù)組中，由于第二位少了一些，所以干脆少一行，還有刪除的按鈕，以及最后的遮罩層，用于點(diǎn)擊其他地方關(guān)閉鍵盤
接下來(lái)先加幾個(gè)測(cè)試的數(shù)據(jù)把基本的顏色寫好：
data: {
dataArr1:["京","滬","粵","津","冀","晉","遼","蒙","黑","吉"],
dataArr2:["蘇","浙","皖","閩","贛","魯","豫","鄂","湘"],
dataArr3:["川","貴","云","渝","桂","瓊","藏","陜"],
dataArr4:["甘","青","寧","新","臺(tái)"]
}
這里以輸入省份的為例
接下來(lái)就是把我們的樣式添加上去就可以看到效果了：
.keyboard {
position: fixed;
left: 0;
bottom: 0;
z-index: 99999;
width: 100%;
background: #d1d6d9;
padding: 20rpx 10rpx 0;
padding-bottom:calc(30px + env(safe-area-inset-bottom)/2);
box-sizing: border-box;
}
.keyboard .item {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20rpx;
}
.keyboard .item view {
width: 9%;
height: 70rpx;
line-height: 70rpx;
text-align: center;
margin-right: 10rpx;
background: #ffffff;
border-radius: 10rpx;
font-size: 28rpx;
}
.keyboard .item view:last-child {
margin-right: 0;
}
.keyboard .delbtn {
position: fixed;
right: 10rpx;
bottom: calc(40px + env(safe-area-inset-bottom)/2);
height: 70rpx;
width: 18%;
z-index: 999999;
background: #adb3bd;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
}
.keyboard .delbtn image{
width: 60rpx;
height: 60rpx;
}
.mask{
position: fixed;
left: 0;
top: 113rpx;
bottom: 0;
right: 0;
z-index: 99998;
}
這里樣式就不多說(shuō)了，大家可以按照自己的喜好來(lái)就行
現(xiàn)在已經(jīng)可以看到效果了，如圖：
組件實(shí)現(xiàn)
組件的實(shí)現(xiàn)其實(shí)很簡(jiǎn)單，主要需要知道微信組件的用法就ok。
參數(shù)
實(shí)現(xiàn)之前來(lái)看看需要什么參數(shù)，由于是鍵盤肯定是需要顯示和隱藏的，所以需要一個(gè)顯示和隱藏的參數(shù)這里就命名為isShow。再看我們的樣式如果是輸入第二位或者后面的呢是不是之前定義的幾個(gè)數(shù)組數(shù)據(jù)就得改變，問(wèn)題來(lái)了什么時(shí)候改變呢？是不是應(yīng)該在點(diǎn)擊輸入的地方就打開(kāi)這個(gè)時(shí)候就知道了是輸入省份還是輸入第二位還是后面的，所以這里需要有一個(gè)參數(shù)來(lái)表示當(dāng)前是需要顯示什么類型的鍵盤暫命名為keyType。到這里參數(shù)有了，再來(lái)看看是否需要設(shè)置默認(rèn)值是啥，對(duì)于isShow來(lái)說(shuō)開(kāi)始肯定是false即為不顯示的，至于keyType默認(rèn)那個(gè)都行，這里默認(rèn)值設(shè)為省份的。這里的參數(shù)其實(shí)就是需要調(diào)用組件時(shí)傳遞過(guò)來(lái)的參數(shù)，所以這兩個(gè)參數(shù)就是設(shè)為組件的屬性。
有了上面的分析，組件的大概就出來(lái)了，代碼如下：
Component({
properties: {
keyType:{
type:String,
value:'province'
},
isShow:{
type:Boolean,
value:false
}
},
data: {
dataArr1:["京","滬","粵","津","冀","晉","遼","蒙","黑","吉"],
dataArr2:["蘇","浙","皖","閩","贛","魯","豫","鄂","湘"],
dataArr3:["川","貴","云","渝","桂","瓊","藏","陜"],
dataArr4:["甘","青","寧","新","臺(tái)"]
}
})
鍵盤類型的判斷
ok，上面已經(jīng)把鍵盤所需參數(shù)考慮好了，接下來(lái)就是需要根據(jù)傳入的keyType來(lái)切換不同的鍵盤數(shù)組的值了。其實(shí)就是在組件方法里面寫一個(gè)方法來(lái)切換就行了，實(shí)現(xiàn)如下：
Component({
properties: {
keyType:{
type:String,
value:'province'
},
isShow:{
type:Boolean,
value:false
}
},
data: {
dataArr1:[],
dataArr2:[],
dataArr3:[],
dataArr4:[]
},
methods: {
changeType(){
if(this.data.keyType == 'letter'){
this.setData({
dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
dataArr2:["A","S","D","F","G","H","J","K","L"],
dataArr3:["Z","X","C","V","B"],
dataArr4:[]
})
}else if(this.data.keyType == 'province'){
this.setData({
dataArr1:["京","滬","粵","津","冀","晉","遼","蒙","黑","吉"],
dataArr2:["蘇","浙","皖","閩","贛","魯","豫","鄂","湘"],
dataArr3:["川","貴","云","渝","桂","瓊","藏","陜"],
dataArr4:["甘","青","寧","新","臺(tái)"]
})
}else if(this.data.keyType == 'carlicense'){
this.setData({
dataArr1:["1","2","3","4","5","6","7","8","9","0"],
dataArr2:["A","B","C","D","E","F","G","H","J","K"],
dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
dataArr4:["W","X","Y","Z","港","澳","學(xué)","領(lǐng)"]
})
}
}
}
})
切的方法有了，現(xiàn)在就是在初始化的時(shí)候調(diào)用這個(gè)方法就行了，修改代碼如下：
Component({
properties: {
keyType:{
type:String,
value:'province'
},
isShow:{
type:Boolean,
value:false
}
},
data: {
dataArr1:[],
dataArr2:[],
dataArr3:[],
dataArr4:[]
},
attached(){
this.changeType()
},
methods: {
changeType(){
if(this.data.keyType == 'letter'){
this.setData({
dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
dataArr2:["A","S","D","F","G","H","J","K","L"],
dataArr3:["Z","X","C","V","B"],
dataArr4:[]
})
}else if(this.data.keyType == 'province'){
this.setData({
dataArr1:["京","滬","粵","津","冀","晉","遼","蒙","黑","吉"],
dataArr2:["蘇","浙","皖","閩","贛","魯","豫","鄂","湘"],
dataArr3:["川","貴","云","渝","桂","瓊","藏","陜"],
dataArr4:["甘","青","寧","新","臺(tái)"]
})
}else if(this.data.keyType == 'carlicense'){
this.setData({
dataArr1:["1","2","3","4","5","6","7","8","9","0"],
dataArr2:["A","B","C","D","E","F","G","H","J","K"],
dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
dataArr4:["W","X","Y","Z","港","澳","學(xué)","領(lǐng)"]
})
}
}
}
})
到這里組件的基本功能已經(jīng)完成了，但是當(dāng)我們點(diǎn)擊鍵盤上的內(nèi)容的時(shí)候，你會(huì)發(fā)現(xiàn)沒(méi)有反應(yīng)，嗯嗯。。。。。這里好像漏了一個(gè)東西，既然是鍵盤肯定是需要得到輸入結(jié)果的啦。
獲取輸入內(nèi)容
要獲取鍵盤輸入的內(nèi)容就需要給鍵盤的每個(gè)按鍵新增事件來(lái)獲取輸入內(nèi)容，將之前的結(jié)構(gòu)中新增事件，具體可參見(jiàn)文章第一段代碼，具體的實(shí)現(xiàn)代碼如下：
methods: {
inputKey(e){
console.log(e.currentTarget.dataset.value)
},
delKey(e){
console.log(e.currentTarget.dataset.value)
},
hideKeyBoard(){
this.setData({
isShow:false
})
}
}
這里將刪除和關(guān)閉鍵盤的時(shí)間也添加上了，通過(guò)以上兩個(gè)方法就能獲取輸入的值了。這時(shí)當(dāng)我們點(diǎn)擊某個(gè)字符時(shí)就會(huì)看到控制面板里打印出剛剛選擇的值了。
可是我需要不是打印出值啊，是需要將值顯示在頁(yè)面上才行，這里就需要將組建獲取到的值傳遞給調(diào)用改組件的頁(yè)面了，如何傳遞給調(diào)用該組件的頁(yè)面呢？
組件傳參
這里咱們就可以去微信小程序的官方文檔看看了，畢竟官方文檔是個(gè)好東西嘛，找到下圖所示的地方：
我們這里用到的就是組件通信的第二點(diǎn)事件，可以傳遞任意數(shù)據(jù)的，那么根據(jù)官方文檔的介紹我相信大家一看就知道怎么使用了，代碼如下：
methods: {
inputKey(e){
this.triggerEvent('inputword', {type:'input',value:e.currentTarget.dataset.value})
},
delKey(e){
this.triggerEvent('inputword', {type:'del'})
},
hideKeyBoard(){
this.setData({
isShow:false
})
this.triggerEvent('inputword', {type:'blur'})
}
}
這里呢是將所以的操作都通過(guò)一個(gè)事件來(lái)傳遞數(shù)據(jù)，通過(guò)增加一個(gè)type來(lái)區(qū)分到底是輸入、刪除還是關(guān)閉鍵盤。
組件使用
嗯嗯，不容易啊，終于到了使用組件的時(shí)候了，這里根據(jù)微信組件的用法如下操作：
在頁(yè)面配置文件中引入組件地址
在頁(yè)面中添加組件的標(biāo)簽
在添加的標(biāo)簽上面添加需要傳遞的參數(shù)和事件
相關(guān)代碼如下：
{
"navigationBarTitleText": "新增車輛",
"usingComponents": {
"keyboard":"../../components/keyboard/index"
}
}
在需要用到改組件的頁(yè)面的配置文件中加入上面帶代碼
<view class="bind-car">
<view class="car-province {{focusProvince?'active':''}}">
<view bindtap="chooseProvinceCn">{{provinceCn}}</view>
<view bindtap="chooseProvinceCode">{{provinceCode}}</view>
</view>
<view class="car-number {{focusCode?'active':''}}" bindtap="chooseCarCode">{{carCode}}</view>
</view>
<keyboard bindinputword="inputWord" keyType="{{setKeyType}}" isShow="{{showKeyBoard}}"></keyboard>
在使用到的頁(yè)面中加入上面最后一行的代碼，并添加上相信的參數(shù)和事件
下一步就是在頁(yè)面的js中來(lái)處理相應(yīng)的參數(shù)和事件，具體代碼如下：
Page({
data: {
focusProvince:false,
focusCode:false,
setKeyType:'province',
showKeyBoard:false,
keyIndex:0,
provinceCn:'',
provinceCode:'',
carCode:''
},
inputWord(e){
if(e.detail.type == 'input'){
if(this.data.keyIndex == 0){
this.setData({
provinceCn:e.detail.value
})
}else if(this.data.keyIndex == 1){
this.setData({
provinceCode:e.detail.value
})
}else if(this.data.keyIndex == 2){
if(this.data.carCode.length < 6){
this.setData({
carCode:this.data.carCode + e.detail.value
})
}
}
}else if(e.detail.type == 'del'){
if(this.data.carCode){
this.setData({
carCode:this.data.carCode.substr(0, this.data.carCode.length - 1)
})
}
}else if(e.detail.type == 'blur'){
this.setData({
focusCode:false,
focusProvince:false
})
}
},
chooseProvinceCn(){
this.setData({
setKeyType:'province',
showKeyBoard:true,
keyIndex:0,
focusProvince:true,
focusCode:false
})
},
chooseProvinceCode(){
this.setData({
setKeyType:'letter',
showKeyBoard:true,
keyIndex:1,
focusProvince:true,
focusCode:false
})
},
chooseCarCode(){
this.setData({
setKeyType:'carlicense',
showKeyBoard:true,
keyIndex:2,
focusCode:true,
focusProvince:false
})
}
})
頁(yè)面中的inputWord就是我們最終需要處理的事件，另外幾個(gè)是輸入后控制焦點(diǎn)并顯示相應(yīng)的紅色方框的開(kāi)關(guān)
測(cè)試
這一步就是程序小哥哥小姐姐比較害怕的，測(cè)試的小哥哥小姐姐就那咋自己寫的代碼不停的亂搞一通，哈哈哈，最后骨頭里挑刺。這里呢當(dāng)我們分別選擇不同輸入的type時(shí)會(huì)發(fā)現(xiàn)鍵盤的內(nèi)容沒(méi)有改變，嗯嗯，原來(lái)還是寫了個(gè)bug給自己啊。
解決鍵盤類型判斷的bug
通過(guò)上面自己簡(jiǎn)單的測(cè)試后發(fā)現(xiàn)有個(gè)bug需要去修復(fù)，其實(shí)這個(gè)問(wèn)題的點(diǎn)在于每次去顯示鍵盤時(shí)傳遞給組件的keyType有緩存導(dǎo)致的，所以需要再組件中屬性聲明的地方來(lái)個(gè)監(jiān)聽(tīng)變化咯，說(shuō)干就干，改好了馬上下班，代碼如下：
Component({
properties: {
keyType:{
type:String,
value:'letter',
observer:function(newVal,oldVal){
this.changeType()
}
},
isShow:{
type:Boolean,
value:false
}
}
})
在屬性中新增observer的監(jiān)聽(tīng)函數(shù)，當(dāng)有變化的時(shí)候就去調(diào)用判斷類型的函數(shù)就可以了。這樣就可以愉快的使用。最后打卡，背包走人咯。。。。等等后面還有呢
結(jié)束語(yǔ)
目前這個(gè)組件也只是為了完成需求而寫的，可能實(shí)際使用過(guò)程中還是會(huì)有很多問(wèn)題的，歡迎大家提出哦。最后放上每個(gè)文件完整的代碼哦
組件的代碼
WXML
<view class="keyboard" wx:if="{{isShow}}">
<view class="item">
<view wx:for="{{dataArr1}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
</view>
<view class="item">
<view wx:for="{{dataArr2}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
</view>
<view class="item">
<view wx:for="{{dataArr3}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
</view>
<view class="item" wx:if="{{dataArr4.length}}">
<view wx:for="{{dataArr4}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
</view>
<view class="delbtn" bindtap="delKey" wx:if="{{keyType == 'carlicense'}}"><image src="./icon_del.png"></image></view>
</view>
<view class="mask" bindtap="hideKeyBoard" wx:if="{{isShow}}"></view>
WXSS
.keyboard {
position: fixed;
left: 0;
bottom: 0;
z-index: 99999;
width: 100%;
background: #d1d6d9;
padding: 20rpx 10rpx 0;
padding-bottom:calc(30px + env(safe-area-inset-bottom)/2);
box-sizing: border-box;
}
.keyboard .item {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20rpx;
}
.keyboard .item view {
width: 9%;
height: 70rpx;
line-height: 70rpx;
text-align: center;
margin-right: 10rpx;
background: #ffffff;
border-radius: 10rpx;
font-size: 28rpx;
}
.keyboard .item view:last-child {
margin-right: 0;
}
.keyboard .delbtn {
position: fixed;
right: 10rpx;
bottom: calc(40px + env(safe-area-inset-bottom)/2);
height: 70rpx;
width: 18%;
z-index: 999999;
background: #adb3bd;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
}
.keyboard .delbtn image{
width: 60rpx;
height: 60rpx;
}
.mask{
position: fixed;
left: 0;
top: 113rpx;
bottom: 0;
right: 0;
z-index: 99998;
}
JS
Component({
properties: {
keyType:{
type:String,
value:'letter',
observer:function(newVal,oldVal){
this.changeType()
}
},
isShow:{
type:Boolean,
value:false
}
},
data: {
dataArr1:[],
dataArr2:[],
dataArr3:[],
dataArr4:[]
},
attached(){
this.changeType()
},
methods: {
changeType(){
if(this.data.keyType == 'letter'){
this.setData({
dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
dataArr2:["A","S","D","F","G","H","J","K","L"],
dataArr3:["Z","X","C","V","B"],
dataArr4:[]
})
}else if(this.data.keyType == 'province'){
this.setData({
dataArr1:["京","滬","粵","津","冀","晉","遼","蒙","黑","吉"],
dataArr2:["蘇","浙","皖","閩","贛","魯","豫","鄂","湘"],
dataArr3:["川","貴","云","渝","桂","瓊","藏","陜"],
dataArr4:["甘","青","寧","新","臺(tái)"]
})
}else if(this.data.keyType == 'carlicense'){
this.setData({
dataArr1:["1","2","3","4","5","6","7","8","9","0"],
dataArr2:["A","B","C","D","E","F","G","H","J","K"],
dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
dataArr4:["W","X","Y","Z","港","澳","學(xué)","領(lǐng)"]
})
}
},
inputKey(e){
this.triggerEvent('inputword', {type:'input',value:e.currentTarget.dataset.value})
},
delKey(e){
this.triggerEvent('inputword', {type:'del'})
},
hideKeyBoard(){
this.setData({
isShow:false
})
this.triggerEvent('inputword', {type:'blur'})
}
}
})
使用頁(yè)面代碼
JSON
{
"navigationBarTitleText": "新增車輛",
"usingComponents": {
"keyboard":"../../components/keyboard/index"
}
}
WXML
<view class="bind-car">
<view class="car-province {{focusProvince?'active':''}}">
<view bindtap="chooseProvinceCn">{{provinceCn}}</view>
<view bindtap="chooseProvinceCode">{{provinceCode}}</view>
</view>
<view class="car-number {{focusCode?'active':''}}" bindtap="chooseCarCode">{{carCode}}</view>
</view>
<keyboard bindinputword="inputWord" keyType="{{setKeyType}}" isShow="{{showKeyBoard}}"></keyboard>
WXSS
.bind-car {
display: flex;
align-items: center;
background: #FFFFFF;
padding: 25rpx 30rpx;
}
.bind-car .car-province {
margin-right: 30rpx;
width: 170rpx;
height: 88rpx;
border: 1rpx solid #999999;
border-radius: 4rpx;
display: flex;
}
.bind-car .car-province view {
width: 86rpx;
height: 88rpx;
line-height: 88rpx;
text-align: center;
font-size: 34rpx;
font-weight: 500;
color: #333333;
}
.bind-car .car-province view:first-child {
position: relative;
}
.bind-car .car-province view:first-child::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 1rpx;
height: 40rpx;
background: #999999;
margin-top: -20rpx;
}
.bind-car .car-province.active {
border-color: #FF5152;
}
.bind-car .car-province.active view:first-child::after {
background: #E83333;
}
.car-number {
width: 100%;
height: 88rpx;
line-height: 88rpx;
border: 1rpx solid #999999;
border-radius: 4rpx;
font-size: 34rpx;
font-weight: 500;
color: #333333;
text-align: center;
}
.car-number.active {
border-color: #E83333;
}
JS
Page({
data: {
focusProvince:false,
focusCode:false,
setKeyType:'province',
showKeyBoard:false,
keyIndex:0,
provinceCn:'',
provinceCode:'',
carCode:''
},
inputWord(e){
if(e.detail.type == 'input'){
if(this.data.keyIndex == 0){
this.setData({
provinceCn:e.detail.value
})
}else if(this.data.keyIndex == 1){
this.setData({
provinceCode:e.detail.value
})
}else if(this.data.keyIndex == 2){
if(this.data.carCode.length < 6){
this.setData({
carCode:this.data.carCode + e.detail.value
})
}
}
}else if(e.detail.type == 'del'){
if(this.data.carCode){
this.setData({
carCode:this.data.carCode.substr(0, this.data.carCode.length - 1)
})
}
}else if(e.detail.type == 'blur'){
this.setData({
focusCode:false,
focusProvince:false
})
}
},
chooseProvinceCn(){
this.setData({
setKeyType:'province',
showKeyBoard:true,
keyIndex:0,
focusProvince:true,
focusCode:false
})
},
chooseProvinceCode(){
this.setData({
setKeyType:'letter',
showKeyBoard:true,
keyIndex:1,
focusProvince:true,
focusCode:false
})
},
chooseCarCode(){
this.setData({
setKeyType:'carlicense',
showKeyBoard:true,
keyIndex:2,
focusCode:true,
focusProvince:false
})
}
})
到此這篇關(guān)于微信小程序中實(shí)現(xiàn)車牌輸入功能的文章就介紹到這了,更多相關(guān)微信車牌輸入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了js防止頁(yè)面被iframe調(diào)用的方法,可防止頁(yè)面被別的網(wǎng)站iframe調(diào)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了JS匿名函數(shù),結(jié)合實(shí)例形式分析了javascript匿名函數(shù)的定義、參數(shù)、返回值等相關(guān)使用方法,需要的朋友可以參考下2016-11-11
表單元素事件 (Form Element Events)僅在表單元素中有效。2009-07-07
echarts如何實(shí)現(xiàn)帶百分比的橫向柱狀圖
近期在使用echart開(kāi)發(fā)過(guò)程中遇到一些問(wèn)題,需要開(kāi)發(fā)橫向柱狀圖,下面這篇文章主要給大家介紹了關(guān)于echarts如何實(shí)現(xiàn)帶百分比的橫向柱狀圖的相關(guān)資料,需要的朋友可以參考下2021-12-12
JavaScript實(shí)現(xiàn)省份城市的三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)省份城市的三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
JavaScript?發(fā)布訂閱模式（Publish/Subscribe?Pattern）是一種常用的設(shè)計(jì)模式，發(fā)布訂閱模式的核心思想是解耦事件的發(fā)生和事件的處理，本文將介紹?JavaScript?發(fā)布訂閱模式的基本原理、應(yīng)用場(chǎng)景以及各場(chǎng)景的代碼示例,需要的朋友可以參考下2023-05-05
JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼,可實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)動(dòng)態(tài)修改頁(yè)面元素屬性的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了swipe使用及豎屏頁(yè)面滾動(dòng)方法，本文通過(guò)實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2018-06-06
js實(shí)現(xiàn)可折疊展開(kāi)的手風(fēng)琴菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)可折疊展開(kāi)的手風(fēng)琴菜單效果,通過(guò)簡(jiǎn)單的樣式變換控制菜單項(xiàng)的展開(kāi)與折疊功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
手把手教你實(shí)現(xiàn)一個(gè)JavaScript時(shí)間軸組件
本文主要是給大家?guī)?lái)一個(gè)時(shí)間軸的組件開(kāi)發(fā)教程，其主要功能就是可以拖動(dòng)時(shí)間軸來(lái)定位當(dāng)前時(shí)間，可以通過(guò)鼠標(biāo)滾輪來(lái)修改當(dāng)前時(shí)間分辨率，需要的可以參考一下2022-10-10