微信小程序車(chē)牌號(hào)碼模擬鍵盤(pán)輸入功能的實(shí)現(xiàn)代碼
更新時(shí)間：2018年11月11日 09:44:54 作者：iFangHuanrui
這篇文章主要介紹了微信小程序車(chē)牌號(hào)碼模擬鍵盤(pán)輸入功能的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
先來(lái)一波預(yù)覽圖。
預(yù)覽圖片一：
預(yù)覽圖二：
預(yù)覽圖三：
預(yù)覽圖四：
預(yù)覽圖五：
大概的效果就和原來(lái)圖差不多。
思路解析：車(chē)牌號(hào)碼由31位漢字，26位字母，10位數(shù)字組成的，開(kāi)頭第一位由省份簡(jiǎn)稱(chēng)的漢字，第二位字母根據(jù)省份下的城市或地區(qū)區(qū)分，最后的五位或者六位，是有字母和數(shù)字組成的，共有七位的車(chē)牌號(hào)碼和八位的車(chē)牌號(hào)碼，（注：其中的八位數(shù)的車(chē)牌號(hào)碼為能源車(chē)的車(chē)牌號(hào)碼。）
大概的邏輯思維，不包含代碼獲取值什么的或者驗(yàn)證其他的說(shuō)明，詳細(xì)看代碼片段。
第一，原型的設(shè)計(jì)思路：先設(shè)計(jì)好模擬鍵盤(pán)的大概架構(gòu)，樣式。這里的分為三個(gè)不同的模擬鍵盤(pán)結(jié)構(gòu)合在一起，分部為漢字，字母，數(shù)字，其樣式統(tǒng)一；
第二：數(shù)據(jù)的交互思路：對(duì)需要的數(shù)據(jù)綁定或者修改填充等，如何獲取，通過(guò)什么方式獲取，再怎么反饋出來(lái)，需要搭建好數(shù)據(jù)的來(lái)回交互傳遞的大概模型；
第三，交互的體驗(yàn)思路：觸發(fā)或者在輸入框點(diǎn)擊輸入的時(shí)候，啟動(dòng)模擬鍵盤(pán)，先用漢字選擇，其次是字母，最后由字母和數(shù)字混合，對(duì)三個(gè)架構(gòu)先進(jìn)行需求排序的理清；
第四，功能的操作思路：模擬鍵盤(pán)的功能性按鈕，比如數(shù)字與字母之間的的切換，刪除最后一位數(shù)據(jù)，清空全部數(shù)據(jù)和狀態(tài)，關(guān)閉的結(jié)束等操作等體驗(yàn)。
第五：輸入判斷的思路：判斷車(chē)牌號(hào)碼輸入的位數(shù)，第一位和第二位分部是什么，字母與數(shù)字的切換的判斷。刪除到第幾位需要在什么樣的狀態(tài)輸入下等。
大概就這這些樣子了，能寫(xiě)怎么多字，感覺(jué)都超綱了，如果有錯(cuò)的地方，還望留言指正。
最后是源碼：
wxml：
<view class='page wrapper'>
<view class="weui-cell__bd">
<view bindtap='LicensePlateNumber' class='LicensePlateNumber'>
<input value='{{LicensePlateNumber}}' disabled='true' placeholder='請(qǐng)選擇'></input>
</view>
</view>
<view>
<view class='licensePlateShow' hidden='{{licensePlateShowHidden}}'>
<!-- 遮罩層 -->
<view class='licensePlate_Bg' bindtap='licensePlate_close'>
</view>
<!-- 省份 -->
<view class='licensePlate_provinces_Box' hidden='{{licensePlate_provinces_Box}}'>
<view class='licensePlate_provincesTist' wx:for='{{licensePlate_provinces}}' bindtap='licensePlate_provinces' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
<view class='licensePlate_but' bindtap='licensePlate_close'>關(guān)閉</view>
</view>
<!-- 字母 -->
<view class='licensePlate_letter_Box' hidden='{{licensePlate_letter_Box}}'>
<view class='licensePlate_letterTist' wx:for='{{licensePlate_letter}}' bindtap='licensePlate_letter' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
<view class='licensePlate_letterTist_but'>
<view class='licensePlate_but' bindtap='licensePlate_switchDigital'>數(shù)字</view>
<view class='licensePlate_but' bindtap='licensePlate_delete'>刪除</view>
<view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
<view class='licensePlate_but' bindtap='licensePlate_close'>關(guān)閉</view>
</view>
</view>
<!-- 數(shù)字 -->
<view class='licensePlate_digital_Box' hidden='{{licensePlate_digital_Box}}'>
<view class='licensePlate_digitalTist' wx:for='{{licensePlate_digital}}' bindtap='licensePlate_digital' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
<view class='licensePlate_digital_but'>
<view class='licensePlate_but' bindtap='licensePlate_switchLetter'>字母</view>
<view class='licensePlate_but' bindtap='licensePlate_delete'>刪除</view>
<view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
<view class='licensePlate_but' bindtap='licensePlate_close'>關(guān)閉</view>
</view>
</view>
</view>
</view>
</view>
wxss：
@import "weui.wxss";
page{
min-height:%;
}
.wrapper{
width: rpx;
overflow:hidden;
}
.licensePlateShow{
width: rpx;
min-height: %;
position: absolute;
bottom: ;
}
.licensePlate_Bg{
min-height: %;
width: rpx;
position: absolute;
z-index: ;
overflow: hidden;
}
.licensePlate_provinces_Box{
width: rpx;
background-color: #ddda;
margin: auto;
position: absolute;
bottom: ;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: flex-start;
/* border-top: px solid #abbbd; */
z-index: ;
}
.licensePlate_provincesTist{
flex:%;
height: rpx;
line-height: rpx;
margin: auto;
text-align: center;
background-color:#ffffff;
border-top: px solid #abbbd;
border-left: px solid #abbbd;
}
.licensePlate_provincesTist:nth-child(n){
border-right: px solid #abbbd;
}
.licensePlate_letter_Box{
width: rpx;
background-color: #ddda;
margin: auto;
position: absolute;
bottom: ;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: flex-start;
/* border-top: px solid #abbbd; */
z-index: ;
}
.licensePlate_letterTist{
flex:%;
height: rpx;
line-height: rpx;
margin: auto;
text-align: center;
background-color:#ffffff;
border-top: px solid #abbbd;
border-left: px solid #abbbd;
}
.licensePlate_letterTist:nth-child(n){
border-right: px solid #abbbd;
}
.licensePlate_letterTist:nth-child(){
border-right: px solid #abbbd;
}
.licensePlate_letterTist_but{
width: rpx;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.licensePlate_digital_Box{
width: rpx;
background-color: #ddda;
margin: auto;
position: absolute;
bottom: ;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: flex-start;
/* border-top: px solid #abbbd; */
z-index: ;
}
.licensePlate_digitalTist{
flex:%;
height: rpx;
line-height: rpx;
margin: auto;
text-align: center;
background-color:#ffffff;
border-top: px solid #abbbd;
border-left: px solid #abbbd;
}
.licensePlate_digital_but{
width: rpx;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.licensePlate_but{
flex: ;
height: rpx;
line-height: rpx;
text-align: center;
color: #ffffff;
background-color:#ff;
border-top: px solid #abbbd;
border-left: px solid #abbbd;
}
.licensePlate_but:last-child{
border-right: px solid #abbbd;
}
.LicensePlateNumber{
width: rpx;
height: rpx;
border-bottom: rpx solid #abbbd
}
js：
Page({
data: {
licensePlateShowHidden:true,
licensePlate_provinces_Box:true,
licensePlate_letter_Box: true,
licensePlate_digital_Box: true,
licensePlate_provinces: [
"京", "滬", "浙", "蘇", "粵", "魯",
"晉", "冀", "豫", "川", "渝", "遼",
"吉", "黑", "皖", "鄂", "津", "貴",
"云", "桂", "瓊", "青", "新", "藏",
"蒙", "寧", "甘", "陜", "閩", "贛",
"湘"
],
licensePlate_letter: [
"A", "B", "C", "D", "E", "F",
"G", "H", "L", "J", "K", "L",
"M", "N", "O", "P", "Q", "R",
"S", "T", "U", "V", "W", "X",
"Y", "Z"
],
licensePlate_digital: [
"", "", "",
"", "", "",
"", "", "",
""
],
LicensePlateNumber:'',
},
// 顯示模擬鍵盤(pán)
LicensePlateNumber:function(){
var that = this;
var LicensePlateNumber = this.data.LicensePlateNumber;
var LicensePlateNumberLen = LicensePlateNumber.length;
console.log(LicensePlateNumber, LicensePlateNumberLen)
if (LicensePlateNumberLen == ){
this.setData({
licensePlateShowHidden: false,
licensePlate_provinces_Box: false,
})
} else if (LicensePlateNumberLen == ){
this.setData({
licensePlateShowHidden: false,
licensePlate_letter_Box: false,
})
}else{
this.setData({
licensePlateShowHidden: false,
licensePlate_digital_Box: false,
})
}
},
// 切換成字母
licensePlate_switchLetter:function(){
this.setData({
licensePlate_provinces_Box:true,
licensePlate_letter_Box:false,
licensePlate_digital_Box: true,
})
},
// 切換成數(shù)字
licensePlate_switchDigital: function () {
var LicensePlateNumber = this.data.LicensePlateNumber;
var LicensePlateNumberLen = LicensePlateNumber.length;
if (LicensePlateNumberLen == ){
wx.showToast({
title: '車(chē)牌號(hào)碼第二位必須是字母',
icon: 'none',
duration: ,
})
}else{
this.setData({
licensePlate_provinces_Box: true,
licensePlate_letter_Box: true,
licensePlate_digital_Box: false,
})
}
},
// 刪除
licensePlate_delete: function (e) {
var LicensePlateNumber = this.data.LicensePlateNumber;
var LicensePlateNumberLen = LicensePlateNumber.length;
var LicensePlateNumberDelete = LicensePlateNumber.split('');
var NewLicensePlateNumber = LicensePlateNumberDelete.join('').slice(,-)
if (LicensePlateNumberDelete.slice(,-).length == ){
this.setData({
licensePlate_provinces_Box: true,
licensePlate_letter_Box: false,
licensePlate_digital_Box: true,
})
} else if (LicensePlateNumberLen == || LicensePlateNumber == '' || LicensePlateNumberDelete.slice(, -).length == ){
this.setData({
licensePlate_provinces_Box: false,
licensePlate_letter_Box: true,
licensePlate_digital_Box: true,
})
}
this.setData({
LicensePlateNumber: NewLicensePlateNumber
})
},
// 清空
licensePlate_empty: function (e) {
this.setData({
LicensePlateNumber:'',
licensePlate_provinces_Box: false,
licensePlate_letter_Box: true,
licensePlate_digital_Box: true,
})
},
// 關(guān)閉模擬鍵盤(pán)
licensePlate_close:function(){
this.setData({
licensePlateShowHidden: true
})
},
// 點(diǎn)擊獲取省份
licensePlate_provinces: function (e) {
this.setData({
LicensePlateNumber: e.target.dataset.licenseplateprovinces,
licensePlate_letter_Box: false,
licensePlate_digital_Box: true,
})
console.log(e.target.dataset.licenseplateprovinces)
},
// 點(diǎn)擊獲取字母
licensePlate_letter: function (e) {
var LicensePlateNumber = this.data.LicensePlateNumber;
var LicensePlateNumberLen = LicensePlateNumber.length;
if (LicensePlateNumberLen != ) {
this.setData({
LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
})
console.log(e.target.dataset.licenseplateprovinces)
} else {
wx.showToast({
title: '車(chē)牌號(hào)碼最多不能超過(guò)位',
icon: 'none',
duration: ,
})
}
},
// 點(diǎn)擊獲取數(shù)字
licensePlate_digital: function (e) {
var LicensePlateNumber = this.data.LicensePlateNumber;
var LicensePlateNumberLen = LicensePlateNumber.length;
if (LicensePlateNumberLen != ){
this.setData({
LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
})
console.log(e.target.dataset.licenseplateprovinces)
}else{
wx.showToast({
title: '車(chē)牌號(hào)碼最多不能超過(guò)位',
icon:'none',
duration:,
})
}
},
})
總結(jié)
以上所述是小編給大家介紹的微信小程序車(chē)牌號(hào)碼模擬鍵盤(pán)輸入功能的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
javascript實(shí)現(xiàn)瀑布流自適應(yīng)遇到的問(wèn)題及解決方案
這篇文章主要介紹了javascript實(shí)現(xiàn)瀑布流自適應(yīng)遇到的問(wèn)題及解決方案,需要的朋友可以參考下2015-01-01
js版本A*尋路算法...2006-12-12
此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 與 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上則是 create 100 倍，replace 50 倍。2008-03-03
Javascript實(shí)現(xiàn)蘋(píng)果懸浮虛擬按鈕
本文給大家分享的是使用javascript實(shí)現(xiàn)仿制蘋(píng)果的懸浮虛擬按鈕的代碼，非常的簡(jiǎn)單，給大家一個(gè)思路，大家可以根據(jù)自己的情況自由擴(kuò)展。2016-04-04
input?獲取光標(biāo)位置設(shè)置光標(biāo)位置方案
這篇文章主要為大家介紹了input?獲取光標(biāo)位置設(shè)置光標(biāo)位置方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
javascript實(shí)現(xiàn)全角半角檢測(cè)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)全角半角檢測(cè)的方法,涉及javascript針對(duì)字符遍歷與檢測(cè)的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能(搜索功能）
這篇文章主要介紹了layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能，以搜索功能為例進(jìn)行講解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript類(lèi)的寫(xiě)法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
ECharts是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù),涵蓋各行業(yè)圖表,滿(mǎn)足各種需求,下面這篇文章主要給大家介紹了關(guān)于echarts地圖輪播高亮的相關(guān)資料,需要的朋友可以參考下2021-08-08
使用JS手寫(xiě)一個(gè)類(lèi)似?Laravel?驗(yàn)證器的表單驗(yàn)證器
這篇文章主要為大家介紹了使用JS手寫(xiě)一個(gè)類(lèi)似?Laravel?驗(yàn)證器的表單驗(yàn)證器實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06