微信小程序车牌号码模拟键盘输入功能的实现代码


Posted in Javascript onNovember 11, 2018

先来一波预览图。

预览图片一:

微信小程序车牌号码模拟键盘输入功能的实现代码

预览图二:

微信小程序车牌号码模拟键盘输入功能的实现代码

预览图三:

微信小程序车牌号码模拟键盘输入功能的实现代码

 预览图四:

微信小程序车牌号码模拟键盘输入功能的实现代码

预览图五:

微信小程序车牌号码模拟键盘输入功能的实现代码

 大概的效果就和原来图差不多。

思路解析:车牌号码由31位汉字,26位字母,10位数字组成的,开头第一位由省份简称的汉字,第二位字母根据省份下的城市或地区区分,最后的五位或者六位,是有字母和数字组成的,共有七位的车牌号码和八位的车牌号码,(注:其中的八位数的车牌号码为能源车的车牌号码。)

大概的逻辑思维,不包含代码获取值什么的或者验证其他的说明,详细看代码片段。

第一,原型的设计思路:先设计好模拟键盘的大概架构,样式。这里的分为三个不同的模拟键盘结构合在一起,分部为汉字,字母,数字,其样式统一;

第二:数据的交互思路:对需要的数据绑定或者修改填充等,如何获取,通过什么方式获取,再怎么反馈出来,需要搭建好数据的来回交互传递的大概模型;

第三,交互的体验思路:触发或者在输入框点击输入的时候,启动模拟键盘,先用汉字选择,其次是字母,最后由字母和数字混合,对三个架构先进行需求排序的理清;

第四,功能的操作思路:模拟键盘的功能性按钮,比如数字与字母之间的的切换,删除最后一位数据,清空全部数据和状态,关闭的结束等操作等体验。

第五:输入判断的思路:判断车牌号码输入的位数,第一位和第二位分部是什么,字母与数字的切换的判断。删除到第几位需要在什么样的状态输入下等。

大概就这这些样子了,能写怎么多字,感觉都超纲了,如果有错的地方,还望留言指正。

最后是源码:

wxml:

 

<view class='page wrapper'>
 <view class="weui-cell__bd">
  <view bindtap='LicensePlateNumber' class='LicensePlateNumber'>
  <input value='{{LicensePlateNumber}}' disabled='true' placeholder='请选择'></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'>关闭</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'>数字</view>
   <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view>
   <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
   <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>
   </view>
  </view>
  <!-- 数字 -->
  <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'>关闭</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:'',
 },
 // 显示模拟键盘
 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,
  })
 },
 // 切换成数字
 licensePlate_switchDigital: function () {
  var LicensePlateNumber = this.data.LicensePlateNumber;
  var LicensePlateNumberLen = LicensePlateNumber.length;
  if (LicensePlateNumberLen == ){
  wx.showToast({
   title: '车牌号码第二位必须是字母',
   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,
  })
 },
 // 关闭模拟键盘
 licensePlate_close:function(){
  this.setData({
  licensePlateShowHidden: true
  })
 },
 // 点击获取省份
 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)
 },
 // 点击获取字母
 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: '车牌号码最多不能超过位',
   icon: 'none',
   duration: ,
  })
  }
 },
 // 点击获取数字
 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: '车牌号码最多不能超过位',
   icon:'none',
   duration:,
  })
  }
 },
 })

总结

以上所述是小编给大家介绍的微信小程序车牌号码模拟键盘输入功能的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js列举css中所有图标的实现代码
Jul 04 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
php结合js实现多条件组合查询
May 28 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
vue实现循环滚动列表
Jun 30 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 #Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 #Javascript
AngularJS上传文件的示例代码
Nov 10 #Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 #Javascript
优雅的在React项目中使用Redux的方法
Nov 10 #Javascript
Vue组件之单向数据流的解决方法
Nov 10 #Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 #Javascript
You might like
php正则
2006/07/07 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
python实现socket端口重定向示例
2014/02/10 Python
python中字符串前面加r的作用
2015/06/04 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
Python偏函数实现原理及应用
2020/11/20 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
大整数数相乘的问题
2012/07/22 面试题
商务日语毕业生自荐信范文
2013/11/14 职场文书
工作交流会欢迎词
2014/01/12 职场文书
2015年人事科工作总结
2015/04/28 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
安全生产学习心得体会
2016/01/18 职场文书
六五普法学习心得体会
2016/01/21 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers