微信小程序车牌号码模拟键盘输入
2018-11-10 19:01
941 查看
微信小程序车牌号码模拟键盘输入练习，
未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。
相关资料参考：https://blog.csdn.net/littlerboss/article/details/79877918；
先来一波预览图。
预览图片一：
预览图二：
预览图三：
预览图四：
预览图五：
大概的效果就和原来图差不多。
思路解析：车牌号码由31位汉字，26位字母，10位数字组成的，开头第一位由省份简称的汉字，第二位字母根据省份下的城市或地区区分，最后的五位或者六位，是有字母和数字组成的，共有七位的车牌号码和八位的车牌号码，（注：其中的八位数的车牌号码为能源车的车牌号码。）
大概的逻辑思维，不包含代码获取值什么的或者验证其他的说明，详细看代码片段。
第一，原型的设计思路：先设计好模拟键盘的大概架构，样式。这里的分为三个不同的模拟键盘结构合在一起，分部为汉字，字母，数字，其样式统一；
第二：数据的交互思路：对需要的数据绑定或者修改填充等，如何获取，通过什么方式获取，再怎么反馈出来，需要搭建好数据的来回交互传递的大概模型；
第三，交互的体验思路：触发或者在输入框点击输入的时候，启动模拟键盘，先用汉字选择，其次是字母，最后由字母和数字混合，对三个架构先进行需求排序的理清；
第四，功能的操作思路：模拟键盘的功能性按钮，比如数字与字母之间的的切换，删除最后一位数据，清空全部数据和状态，关闭的结束等操作等体验。
第五：输入判断的思路：判断车牌号码输入的位数，第一位和第二位分部是什么，字母与数字的切换的判断。删除到第几位需要在什么样的状态输入下等。
大概就这这些样子了，能写怎么多字，感觉都超纲了，如果有错的地方，还望留言指正。
最后是源码：
wxml：
1 <view class='page wrapper'>
2 <view class="weui-cell__bd">
3 <view bindtap='LicensePlateNumber' class='LicensePlateNumber'>
4 <input value='{{LicensePlateNumber}}' disabled='true' placeholder='请选择'></input>
5
6 </view>
7 </view>
8
9 <view>
10
11 <view class='licensePlateShow' hidden='{{licensePlateShowHidden}}'>
12 <!-- 遮罩层 -->
13 <view class='licensePlate_Bg' bindtap='licensePlate_close'>
14 </view>
15
16 <!-- 省份 -->
17 <view class='licensePlate_provinces_Box' hidden='{{licensePlate_provinces_Box}}'>
18 <view class='licensePlate_provincesTist' wx:for='{{licensePlate_provinces}}' bindtap='licensePlate_provinces' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
19 <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>
20 </view>
21
22 <!-- 字母 -->
23 <view class='licensePlate_letter_Box' hidden='{{licensePlate_letter_Box}}'>
24 <view class='licensePlate_letterTist' wx:for='{{licensePlate_letter}}' bindtap='licensePlate_letter' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
25 <view class='licensePlate_letterTist_but'>
26 <view class='licensePlate_but' bindtap='licensePlate_switchDigital'>数字</view>
27 <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view>
28 <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
29 <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>
30 </view>
31 </view>
32
33 <!-- 数字 -->
34 <view class='licensePlate_digital_Box' hidden='{{licensePlate_digital_Box}}'>
35 <view class='licensePlate_digitalTist' wx:for='{{licensePlate_digital}}' bindtap='licensePlate_digital' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
36 <view class='licensePlate_digital_but'>
37 <view class='licensePlate_but' bindtap='licensePlate_switchLetter'>字母</view>
38 <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view>
39 <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
40 <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>
41 </view>
42 </view>
43 </view>
44
45 </view>
46 </view>
wxss：
1 @import "weui.wxss";
2
3 page{
4 min-height:100%;
5 }
6
7 .wrapper{
8 width: 750rpx;
9 overflow:hidden;
10 }
11
12 .licensePlateShow{
13 width: 750rpx;
14 min-height: 100%;
15 position: absolute;
16 bottom: 0;
17 }
18
19 .licensePlate_Bg{
20 min-height: 100%;
21 width: 750rpx;
22 position: absolute;
23 z-index: 40;
24 overflow: hidden;
25 }
26
27 .licensePlate_provinces_Box{
28 width: 750rpx;
29 background-color: #d0d4da;
30 margin: 0 auto;
31 position: absolute;
32 bottom: 0;
33 display: flex;
34 display: -webkit-flex;
35 flex-wrap: wrap;
36 justify-content: flex-start;
37 /* border-top: 1px solid #abb2bd; */
38 z-index: 55;
39 }
40
41 .licensePlate_provincesTist{
42 flex:15%;
43 height: 100rpx;
44 line-height: 100rpx;
45 margin: 0 auto;
46 text-align: center;
47 background-color:#ffffff;
48 border-top: 1px solid #abb2bd;
49 border-left: 1px solid #abb2bd;
50 }
51
52 .licensePlate_provincesTist:nth-child(6n){
53 border-right: 1px solid #abb2bd;
54 }
55
56 .licensePlate_letter_Box{
57 width: 750rpx;
58 background-color: #d0d4da;
59 margin: 0 auto;
60 position: absolute;
61 bottom: 0;
62 display: flex;
63 display: -webkit-flex;
64 flex-wrap: wrap;
65 justify-content: flex-start;
66 /* border-top: 1px solid #abb2bd; */
67 z-index: 55;
68 }
69
70 .licensePlate_letterTist{
71 flex:15%;
72 height: 100rpx;
73 line-height: 100rpx;
74 margin: 0 auto;
75 text-align: center;
76 background-color:#ffffff;
77 border-top: 1px solid #abb2bd;
78 border-left: 1px solid #abb2bd;
79 }
80
81 .licensePlate_letterTist:nth-child(6n){
82 border-right: 1px solid #abb2bd;
83 }
84
85 .licensePlate_letterTist:nth-child(26){
86 border-right: 1px solid #abb2bd;
87 }
88
89 .licensePlate_letterTist_but{
90 width: 750rpx;
91 display: flex;
92 display: -webkit-flex;
93 flex-wrap: wrap;
94 justify-content: flex-start;
95 }
96
97 .licensePlate_digital_Box{
98 width: 750rpx;
99 background-color: #d0d4da;
100 margin: 0 auto;
101 position: absolute;
102 bottom: 0;
103 display: flex;
104 display: -webkit-flex;
105 flex-wrap: wrap;
106 justify-content: flex-start;
107 /* border-top: 1px solid #abb2bd; */
108 z-index: 55;
109 }
110
111 .licensePlate_digitalTist{
112 flex:25%;
113 height: 125rpx;
114 line-height: 125rpx;
115 margin: 0 auto;
116 text-align: center;
117 background-color:#ffffff;
118 border-top: 1px solid #abb2bd;
119 border-left: 1px solid #abb2bd;
120 }
121
122 .licensePlate_digital_but{
123 width: 750rpx;
124 display: flex;
125 display: -webkit-flex;
126 flex-wrap: wrap;
127 justify-content: flex-start;
128 }
129
130 .licensePlate_but{
131 flex: 1;
132 height: 100rpx;
133 line-height: 100rpx;
134 text-align: center;
135 color: #ffffff;
136 background-color:#ff6600;
137 border-top: 1px solid #abb2bd;
138 border-left: 1px solid #abb2bd;
139 }
140
141 .licensePlate_but:last-child{
142 border-right: 1px solid #abb2bd;
143 }
144
145 .LicensePlateNumber{
146 width: 750rpx;
147 height: 200rpx;
148 border-bottom: 1rpx solid #abb2bd
149 }
js：
1 Page({
2
3 data: {
4 licensePlateShowHidden:true,
5 licensePlate_provinces_Box:true,
6 licensePlate_letter_Box: true,
7 licensePlate_digital_Box: true,
8 licensePlate_provinces: [
9 "京", "沪", "浙", "苏", "粤", "鲁",
10 "晋", "冀", "豫", "川", "渝", "辽",
11 "吉", "黑", "皖", "鄂", "津", "贵",
12 "云", "桂", "琼", "青", "新", "藏",
13 "蒙", "宁", "甘", "陕", "闽", "赣",
14 "湘"
15 ],
16 licensePlate_letter: [
17 "A", "B", "C", "D", "E", "F",
18 "G", "H", "L", "J", "K", "L",
19 "M", "N", "O", "P", "Q", "R",
20 "S", "T", "U", "V", "W", "X",
21 "Y", "Z"
22 ],
23 licensePlate_digital: [
24 "1", "2", "3",
25 "4", "5", "6",
26 "7", "8", "9",
27 "0"
28 ],
29 LicensePlateNumber:'',
30 },
31
32 // 显示模拟键盘
33 LicensePlateNumber:function(){
34 var that = this;
35 var LicensePlateNumber = this.data.LicensePlateNumber;
36 var LicensePlateNumberLen = LicensePlateNumber.length;
37 console.log(LicensePlateNumber, LicensePlateNumberLen)
38 if (LicensePlateNumberLen == 0){
39 this.setData({
40 licensePlateShowHidden: false,
41 licensePlate_provinces_Box: false,
42 })
43 } else if (LicensePlateNumberLen == 1){
44 this.setData({
45 licensePlateShowHidden: false,
46 licensePlate_letter_Box: false,
47 })
48 }else{
49 this.setData({
50 licensePlateShowHidden: false,
51 licensePlate_digital_Box: false,
52 })
53 }
54
55 },
56
57 // 切换成字母
58 licensePlate_switchLetter:function(){
59 this.setData({
60 licensePlate_provinces_Box:true,
61 licensePlate_letter_Box:false,
62 licensePlate_digital_Box: true,
63 })
64 },
65
66 // 切换成数字
67 licensePlate_switchDigital: function () {
68 var LicensePlateNumber = this.data.LicensePlateNumber;
69 var LicensePlateNumberLen = LicensePlateNumber.length;
70 if (LicensePlateNumberLen == 1){
71 wx.showToast({
72 title: '车牌号码第二位必须是字母',
73 icon: 'none',
74 duration: 1500,
75 })
76 }else{
77 this.setData({
78 licensePlate_provinces_Box: true,
79 licensePlate_letter_Box: true,
80 licensePlate_digital_Box: false,
81 })
82 }
83 },
84
85
86 // 删除
87 licensePlate_delete: function (e) {
88 var LicensePlateNumber = this.data.LicensePlateNumber;
89 var LicensePlateNumberLen = LicensePlateNumber.length;
90 var LicensePlateNumberDelete = LicensePlateNumber.split('');
91 var NewLicensePlateNumber = LicensePlateNumberDelete.join('').slice(0,-1)
92 if (LicensePlateNumberDelete.slice(0,-1).length == 1){
93 this.setData({
94 licensePlate_provinces_Box: true,
95 licensePlate_letter_Box: false,
96 licensePlate_digital_Box: true,
97 })
98 } else if (LicensePlateNumberLen == 0 || LicensePlateNumber == '' || LicensePlateNumberDelete.slice(0, -1).length == 0){
99 this.setData({
100 licensePlate_provinces_Box: false,
101 licensePlate_letter_Box: true,
102 licensePlate_digital_Box: true,
103 })
104 }
105 this.setData({
106 LicensePlateNumber: NewLicensePlateNumber
107 })
108 },
109
110 // 清空
111 licensePlate_empty: function (e) {
112 this.setData({
113 LicensePlateNumber:'',
114 licensePlate_provinces_Box: false,
115 licensePlate_letter_Box: true,
116 licensePlate_digital_Box: true,
117 })
118 },
119
120 // 关闭模拟键盘
121 licensePlate_close:function(){
122 this.setData({
123 licensePlateShowHidden: true
124 })
125 },
126
127 // 点击获取省份
128 licensePlate_provinces: function (e) {
129 this.setData({
130 LicensePlateNumber: e.target.dataset.licenseplateprovinces,
131 licensePlate_letter_Box: false,
132 licensePlate_digital_Box: true,
133 })
134 console.log(e.target.dataset.licenseplateprovinces)
135 },
136
137 // 点击获取字母
138 licensePlate_letter: function (e) {
139 var LicensePlateNumber = this.data.LicensePlateNumber;
140 var LicensePlateNumberLen = LicensePlateNumber.length;
141 if (LicensePlateNumberLen != 8) {
142 this.setData({
143 LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
144 })
145 console.log(e.target.dataset.licenseplateprovinces)
146 } else {
147 wx.showToast({
148 title: '车牌号码最多不能超过8位',
149 icon: 'none',
150 duration: 1500,
151 })
152 }
153 },
154
155 // 点击获取数字
156 licensePlate_digital: function (e) {
157 var LicensePlateNumber = this.data.LicensePlateNumber;
158 var LicensePlateNumberLen = LicensePlateNumber.length;
159 if (LicensePlateNumberLen != 8){
160 this.setData({
161 LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
162 })
163 console.log(e.target.dataset.licenseplateprovinces)
164 }else{
165 wx.showToast({
166 title: '车牌号码最多不能超过8位',
167 icon:'none',
168 duration:1500,
169 })
170 }
171 },
172
173
174 })
噢了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 微信小程序车牌号码模拟键盘输入功能的实现代码
- 微信小程序——车牌键盘输入js+css
- vc++6.0 模拟鼠标点击代码 木马程序的编写 VC 模拟键盘输入
- android自定义键盘 限制车牌号码输入
- C#程序模拟键盘输入向记事本内添加内容
- iOS仿支付宝车牌号码输入键盘
- 04使用程序模拟键盘输入
- //1.编写代码模拟三次密码输入的场景。//2.编写一个程序，可以一直接收键盘字符，如果是小写字符就输出对应的大写字符，如果接收的是大写字符，就输出对应的小写字符，如果是数字不输出。
- 用Python模拟键盘输入
- 远程控制篇：用Delphi模拟键盘输入/鼠标点击
- 用Python模拟键盘输入
- 编写程序，循环接收用户从键盘输入多个字符串，直到输入“ end”时循环结束，并将所有 已输入的字符串按字典顺序倒序打印。
- 详解微信小程序调起键盘性能优化
- 模拟键盘输入就是使用SendKeys.Send（“汉字”）与SendKeys.SendWait（“字母”）实现的
- 模拟键盘输入首先要用到一个API函数：keybd_event
- js -- 设置输入框光标位置（在模拟微信表情输入的时候遇到的）
- 一段无聊的键盘触发模拟抽卡程序
- SendInput模拟键盘输入的问题
- 使用C#模拟键盘输入、鼠标移动和点击、设置光标位置及控制应用程序的显示
- android高仿微信表情输入与键盘输入详解－解决跳闪与表情切换问题