版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第微信小程序?qū)崿F(xiàn)車牌鍵盤(pán)本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)車牌鍵盤(pán)的具體代碼，供大家參考，具體內(nèi)容如下
一、效果圖
plateNumKeyboard.wxml
view
view
view
text請(qǐng)輸入車牌號(hào):/text
/view
view
view
viewclass="{{inputOnFocusIndex=='0''plate-nums-foc':'plate-nums-first'}}"
textbindtap="inputClick"data-id="0"{{inputPlates.index0}}/text
/view
viewclass="{{inputOnFocusIndex=='1''plate-nums-foc':'plate-nums-first'}}"
textbindtap="inputClick"data-id="1"{{inputPlates.index1}}/text
/view
view
imagesrc="../../images/point.png"/image
/view
viewclass="{{inputOnFocusIndex=='2''plate-nums-foc':'plate-nums-first'}}"
textbindtap="inputClick"data-id="2"{{inputPlates.index2}}/text
/view
viewclass="{{inputOnFocusIndex=='3''plate-nums-foc':'plate-nums-first'}}"
textbindtap="inputClick"data-id="3"{{inputPlates.index3}}/text
/view
viewclass="{{inputOnFocusIndex=='4''plate-nums-foc':'plate-nums-first'}}"
textbindtap="inputClick"data-id="4"{{inputPlates.index4}}/text
/view
viewclass="{{inputOnFocusIndex=='5''plate-nums-foc':'plate-nums-first'}}"
textbindtap="inputClick"data-id="5"{{inputPlates.index5}}/text
/view
viewclass="{{inputOnFocusIndex=='6''plate-nums-foc':'plate-nums-first'}}"
textbindtap="inputClick"data-id="6"{{inputPlates.index6}}/text
/view
viewwx:if="{{flag}}"bindtap="showLast"
+
/view
viewwx:if="{{!flag}}"class="last{{inputOnFocusIndex=='7''plate-nums-foc':'plate-nums-first'}}"
textbindtap="inputClick"data-id="7"{{inputPlates.index7}}/text
/view
/view
/view
/view
!--鍵盤(pán)--
viewwx:if="{{isKeyboard}}"
view
textcatchtap="closeKeyBoard"data-index="1"
關(guān)閉/text
/view
viewwx:if="{{!isNumberKB}}"
view
viewcatchtap="tapKeyboard"data-index="{{idx}}"data-val="{{itemName}}"
hoverhoverStartTime="0"hoverStayTime="80"wx:if="{{idx=9}}"wx:for="{{keyboard1}}"
wx:for-index="idx"wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
/view
view
viewcatchtap="tapKeyboard"data-index="{{idx}}"data-val="{{itemName}}"
hoverhoverStartTime="0"hoverStayTime="80"wx:if="{{idx=18idx9}}"wx:for="{{keyboard1}}"
wx:for-index="idx"wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
/view
view
viewcatchtap="tapKeyboard"data-index="{{idx}}"data-val="{{itemName}}"
hoverhoverStartTime="0"hoverStayTime="80"wx:if="{{idx=25idx18}}"wx:for="{{keyboard1}}"
wx:for-index="idx"wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
/view
view
viewcatchtap="tapKeyboard"data-index="{{idx}}"data-val="{{itemName}}"
hoverhoverStartTime="0"hoverStayTime="80"wx:if="{{idx25}}"wx:for="{{keyboard1}}"
wx:for-index="idx"wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
/view
viewbindtap="tapSpecBtn"data-index="0"hoverhoverStartTime="0"
hoverStayTime="80"
刪除
!--imagedata-index="0"mode="scaleToFill"src="../../images/del.png"/image--
/view
/view
viewwx:if="{{isNumberKB}}"
view
viewwx:if="{{!tapNumidx=9}}"wx:for="{{keyboardNumber}}"wx:for-index="idx"
wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
/view
view
viewcatchtap="tapKeyboard"data-index="{{idx}}"data-val="{{itemName}}"
hoverhoverStartTime="0"hoverStayTime="80"wx:if="{{tapNumidx=9}}"
wx:for="{{keyboardNumber}}"wx:for-index="idx"wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
/view
view
viewcatchtap="tapKeyboard"data-index="{{idx}}"data-val="{{itemName}}"
hoverhoverStartTime="0"hoverStayTime="80"wx:if="{{idx9idx=19}}"
wx:for="{{keyboardNumber}}"wx:for-index="idx"wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
/view
view
viewcatchtap="tapKeyboard"data-index="{{idx}}"data-val="{{itemName}}"
hoverhoverStartTime="0"hoverStayTime="80"wx:if="{{idx19idx=29}}"
wx:for="{{keyboardNumber}}"wx:for-index="idx"wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
/view
view
viewcatchtap="tapKeyboard"data-index="{{idx}}"data-val="{{itemName}}"
hoverhoverStartTime="0"hoverStayTime="80"wx:if="{{idx29idx=33}}"
wx:for="{{keyboardNumber}}"wx:for-index="idx"wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
viewwx:if="{{!tapNumidx33}}"wx:for="{{keyboardNumber}}"wx:for-index="idx"
wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
viewcatchtap="tapKeyboard"data-index="{{idx}}"data-val="{{itemName}}"
hoverhoverStartTime="0"hoverStayTime="80"wx:if="{{tapNumidx33}}"
wx:for="{{keyboardNumber}}"wx:for-index="idx"wx:for-item="itemName"wx:key="itemName"
{{itemName}}
/view
/view
viewbindtap="tapSpecBtn"data-index="0"hoverhoverStartTime="0"
hoverStayTime="80"
刪除
!--imagedata-index="0"mode="scaleToFill"src="../../images/del.png"/image--
/view
/view
/view
/view
plateNumKeyboard.js
Page({
data:{
isKeyboard:1,
isNumberKB:!1,
tapNum:!1,
disableKey:"1234567890港澳學(xué)",
keyboardNumber:"1234567890ABCDEFGHJKLMNPQRSTUVWXYZ港澳學(xué)",
keyboard1:"京滬粵津冀晉蒙遼吉黑蘇浙皖閩贛魯豫鄂湘桂瓊渝川貴云藏陜甘青寧新",
inputPlates:{
index0:"",
index1:"",
index2:"",
index3:"",
index4:"",
index5:"",
index6:"",
index7:""
},
inputOnFocusIndex:"0",
flag:true
onLoad:function(){
/**
*生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow:function(){
this.getHistoryList();
getHistoryList:function(){
letthat=this;
letdata={
unionid:app.globalData.unionid,
}
wxRequest({
url:app.globalData.url+'/car/history/getByOpenId',
method:'get',
header:{
"Authorization":app.globalData.token,
},
data:data,
})
.then((res)={
lethistoryList=res.data.data;
that.setData({
historyList,
})
})
.catch((err)={
console.log(err);
});
showLast:function(){
this.setData({
flag:false,
})
setText:function(e){
lettext=e.currentTarget.dataset.text;
if(text.length==8){
this.setData({
flag:false,
'inputPlates.index7':text[7],
})
}else{
this.setData({
flag:true,
'inputPlates.index7':"",
})
}
this.setData({
'inputPlates.index0':text[0],
'inputPlates.index1':text[1],
'inputPlates.index2':text[2],
'inputPlates.index3':text[3],
'inputPlates.index4':text[4],
'inputPlates.index5':text[5],
'inputPlates.index6':text[6],
})
inputClick:function(t){
varthat=this;
that.setData({
inputOnFocusIndex:t.target.dataset.id,
isKeyboard:!0
})
"0"==this.data.inputOnFocusIndexthat.setData({
tapNum:!1,
isNumberKB:!1
}):"1"==this.data.inputOnFocusIndexthat.setData({
tapNum:!1,
isNumberKB:!0
}):that.setData({
tapNum:!0,
isNumberKB:!0
});
//鍵盤(pán)點(diǎn)擊事件
tapKeyboard:function(t){
t.target.dataset.index;
vara=t.target.dataset.val;
switch(this.data.inputOnFocusIndex){
case"0":
this.setData({
"inputPlates.index0":a,
inputOnFocusIndex:"1"
});
break;
case"1":
this.setData({
"inputPlates.index1":a,
inputOnFocusIndex:"2"
});
break;
case"2":
this.setData({
"inputPlates.index2":a,
inputOnFocusIndex:"3"
});
break;
case"3":
this.setData({
"inputPlates.index3":a,
inputOnFocusIndex:"4"
});
break;
case"4":
this.setData({
"inputPlates.index4":a,
inputOnFocusIndex:"5"
});
break;
case"5":
this.setData({
"inputPlates.index5":a,
inputOnFocusIndex:"6"
});
break;
case"6":
this.setData({
"inputPlates.index6":a,
inputOnFocusIndex:"7"
});
break;
case"7":
if(!this.data.flag){
this.setData({
"inputPlates.index7":a,
inputOnFocusIndex:"7"
});
}
}
if(this.data.inputOnFocusIndex=="0"){
this.setData({
isKeyboard:1,
isNumberKB:!1,
tapNum:!1,
})
}else{
this.setData({
isKeyboard:1,
isNumberKB:1,
tapNum:1,
})
}
closeKeyBoard:function(){
this.setData({
isKeyboard:false,
})
//鍵盤(pán)關(guān)閉按鈕點(diǎn)擊事件
tapSpecBtn:function(){
if(this.data.inputOnFocusIndex=="0"){
this.setData({
isKeyboard:1,
isNumberKB:!1,
tapNum:!1,
})
}else{
this.setData({
isKeyboard:1,
isNumberKB:1,
tapNum:1,
})
}
switch(parseInt(this.data.inputOnFocusIndex)){
case0:
this.setData({
"inputPlates.index0":"",
inputOnFocusIndex:"0",
});
break;
case1:
if(this.data.inputPlates.index1){
this.setData({
"inputPlates.index1":"",
inputOnFocusIndex:"1"
});
}else{
this.setData({
"inputPlates.index0":"",
"inputPlates.index1":"",
inputOnFocusIndex:"0",
});
}
break;
case2:
if(this.data.inputPlates.index2){
this.setData({
"inputPlates.index2":"",
inputOnFocusIndex:"2"
});
}else{
this.setData({
"inputPlates.index1":"",
"inputPlates.index2":"",
inputOnFocusIndex:"1"
});
}
break;
case3:
if(this.data.inputPlates.index3){
this.setData({
"inputPlates.index3":"",
inputOnFocusIndex:"3"
});
}else{
this.setData({
"inputPlates.index2":"",
"inputPlates.index3":"",
inputOnFocusIndex:"2"
});
}
break;
case4:
if(this.data.inputPlates.index4){
this.setData({
"inputPlates.index4":"",
inputOnFocusIndex:"4"
});
}else{
this.setData({
"inputPlates.index3":"",
"inputPlates.index4":"",
inputOnFocusIndex:"3"
});
}
break;
case5:
if(this.data.inputPlates.index5){
this.setData({
"inputPlates.index5":"",
inputOnFocusIndex:"5"
});
}else{
this.setData({
"inputPlates.index4":"",
"inputPlates.index5":"",
inputOnFocusIndex:"4"
});
}
break;
case6:
if(this.data.inputPlates.index6){
this.setData({
"inputPlates.index6":"",
inputOnFocusIndex:"6"
});
}else{
this.setData({
"inputPlates.index5":"",
"inputPlates.index6":"",
inputOnFocusIndex:"5"
});
}
break;
case7:
if(this.data.inputPlates.index7){
this.setData({
"inputPlates.index7":"",
inputOnFocusIndex:"7"
});
}else{
this.setData({
"inputPlates.index6":"",
"inputPlates.index7":"",
inputOnFocusIndex:"6",
flag:true,
});
}
}
})
plateNumKeyboard.wxss
.box{
width:690rpx;
margin:0auto;
margin-top:24rpx;
height:260rpx;
background-color:rgb(237,245,255);
border:2rpxsolidrgb(230,241,255);
border-radius:4rpx;
.box-top{
width:650rpx;
margin:0auto;
height:100rpx;
line-height:100rpx;
text-align:center;
color:rgb(70,145,255);
font-weight:bold;
border-bottom:4rpxsolidrgb(218,235,255);
font-size:28rpx;
.plate-input-body{
/*border:1pxsolidred;*/
height:100rpx;
margin:30rpxauto;
width:650rpx;
.plate-input-content{
display:flex;
flex-direction:row;
height:100rpx;
.plate-nums-foc{
flex:1;
border:2rpxsolidrgb(119,179,255);
margin-right:10rpx;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
height:100%;
box-sizing:border-box;
border-radius:4rpx;
.plate-nums-first{
flex:1;
border:2rpxsolid#ccc;
margin-right:10rpx;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
height:100%;
box-sizing:border-box;
border-radius:4rpx;
.point-box{
width:40rpx;
height:100%;
display:flex;
align-items:center;
justify-content:center;
.point-img{
width:16rpx;
height:16rpx;
.bg1{
background-color:rgb(177,212,255);
justify-content:center;
color:rgb(55,145,255);
border:2rpxdashedrgb(119,179,255);
.plate-num-text{
flex:1;
line-height:100rpx;
height:100%;
box-sizing:border-box;
border-radius:4rpx;
font-size:40rpx;
font-weight:normal;
.last{
margin-right:0;
.text{
ma
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2026年農(nóng)業(yè)文化遺產(chǎn)活化利用指南
- 煙草制品經(jīng)營(yíng)風(fēng)險(xiǎn)防控管理手冊(cè)
- 2026青龍湖（河北）產(chǎn)業(yè)發(fā)展集團(tuán)有限公司招聘15人備考題庫(kù)及一套參考答案詳解
- 2026年原型設(shè)計(jì)工具高階應(yīng)用培訓(xùn)
- 計(jì)算機(jī)行業(yè)年度策略：AI應(yīng)用加快全球格局重塑中
- 職業(yè)健康風(fēng)險(xiǎn)評(píng)估與員工職業(yè)發(fā)展動(dòng)態(tài)調(diào)整機(jī)制
- 職業(yè)健康促進(jìn)與職業(yè)健康效益優(yōu)化
- 職業(yè)健康與心理健康的整合干預(yù)策略-2
- 陽(yáng)江2025年廣東陽(yáng)江陽(yáng)西縣新墟鎮(zhèn)招聘合同制禁毒工作人員筆試歷年參考題庫(kù)附帶答案詳解
- 邢臺(tái)2025年河北邢臺(tái)市襄都區(qū)招聘中小學(xué)幼兒園教師75人筆試歷年參考題庫(kù)附帶答案詳解
- 云南省玉溪市2025-2026學(xué)年八年級(jí)上學(xué)期1月期末物理試題（原卷版+解析版）
- 2026年哈爾濱通河縣第一批公益性崗位招聘62人考試參考試題及答案解析
- 六年級(jí)寒假家長(zhǎng)會(huì)課件
- 就業(yè)協(xié)議書(shū)解約函模板
- 物流鐵路專用線工程節(jié)能評(píng)估報(bào)告
- 2026天津市南開(kāi)區(qū)衛(wèi)生健康系統(tǒng)招聘事業(yè)單位60人（含高層次人才）備考核心試題附答案解析
- 重瞼手術(shù)知情同意書(shū)
- 研發(fā)部門(mén)員工加班管理細(xì)則
- 46566-2025溫室氣體管理體系管理手冊(cè)及全套程序文件
- 九師聯(lián)盟2026屆高三上學(xué)期12月聯(lián)考英語(yǔ)（第4次質(zhì)量檢測(cè)）（含答案）
- 第21章 反比例函數(shù)（單元測(cè)試·綜合卷）（含答案）-滬科版(2024)九上
評(píng)論
0/150
提交評(píng)論