侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序使用车牌号输入法的示例代码

微信(小程序)  /  管理员 发布于 3年前   349

在做小程序时,做了一个关于车的项目,然后需要添加车辆信息、添加车牌号,使用车牌键盘输入,当时我把这个需求给砍了,然后在添加车辆信息时,老大看到数据库里我乱填的车牌号,又让我把他加上了^o^

1.效果图

2.相关代码使用组件形式实现键盘输入

组件代码index.wxml

      {{item}}       {{item}}       {{item}}       {{item}}         {{item}}       {{item}}       {{item}}                 {{item}}   确定   

index.css

.carPlate{ position: fixed; padding: 12rpx 12rpx 30rpx; left: 0; bottom: 0; width: 100%; /* height: 150px; */ font-size: 30rpx; background: #fff; box-sizing: border-box; border-top: 1px solid rgb(211, 207, 207); z-index: 200;}.wordList{ display: flex; width: 100%; justify-content: space-between; align-items: center;}.wordItem{ margin: 5rpx; width: 70rpx; height: 70rpx; line-height: 70rpx; text-align: center; border: 1px solid #eee; border-radius: 10rpx;}.wordConfirm{ width: 130rpx; color: #fff; background: #473af0;}.wordClear{ width: 100rpx;}.clearImg{ width: 60rpx; height: 60rpx; vertical-align: middle;}

index.js

Component({ properties: {  type: {   type: Number,   default: 1,  },  show: {   type: Boolean,   default: false,  } }, data: {  cityKeyword1: '京沪浙苏粤鲁晋冀豫',  cityKeyword2: '川渝辽吉黑皖鄂湘赣',  cityKeyword3: '闽陕甘宁蒙津贵云',  cityKeyword4: '桂琼青新藏港澳台',  keyNumber: '1234567890',  wordList1: 'QWERTYUIOP',  wordList2: 'ASDFGHJKL',  wordList3: 'ZXCVBNM', }, methods: {  handleClick(e) {   let value = e.currentTarget.dataset.item;   let type = e.currentTarget.dataset.type;   switch(value) {    case 'confirm':     this.triggerEvent('confirm');     break;    case 'delete':     this.triggerEvent('delete');     break;    default:      this.triggerEvent('change', { value, type });   }  } }})

3.父组件引入

我想实现点击输入后有上拉的效果,开始我想使用offset来实现的,但是下班后洗衣服想了下,不太好实现,我就想到了我以前做购物车时,有用到transform,原理差不多,我就把他用上了

然后就是点击键盘外实现收起键盘,开始我想到的就是在父组件的最外层定义关闭事件,父级里面的盒子都使用catch方法阻止冒泡,但想下阻止冒泡好像又有点不合情理,就又把阻止冒泡给去掉了

父组件index.wxml

          *车牌号码         {{carNo}}     请输入车牌号          

父组件index.js

Page({ data: {  carNo: '',  translateSpace: 0,  inputType: 1, // 车牌输入类型,1简称,2数字或者字母,  showPlateInput: false, }, /* 用于点击弹出键盘输入,space为键盘弹出后向上拉取的距离 */ handleClick(e) {  /* 150为键盘的高度 */  let space = -(e.currentTarget.offsetTop - 150);  /* regExp用于判断当前已输入的车牌号是否是中文,并让键盘显示中文还是英文输入 */  let regExp = /^[\u4e00-\u9fa5]+/;  let inputType = 1;  if(regExp.test(this.data.carNo)) {   inputType = 2;  }  this.setData({   translateSpace: space,   showPlateInput: true,   inputType  }) }, /* 键盘输入操作 */ handlePlateChange(e) {  let value = e.detail.value;  let type = e.detail.type;  let carNo = this.data.carNo;  carNo += value;  if(type == 1) {   this.setData({    inputType: 2   })  }  this.setData({   carNo  }) }, /* 点击键盘上的确定 */ handlePlateConfirm() {  /* isCarPlate用于判断输入的车牌号是否符合规范 */  if (!this.isCarPlate(this.data.carNo)) {   wx.showToast({    title: '请输入正确的车牌号',    icon: 'none',    duration: 2000   })   return false;  }  this.setData({   translateSpace: 0,   showPlateInput: false,   inputType: 1  }) }, /* 用于键盘输入删除 */ handlePlateDelete(e) {  let carNo = this.data.carNo;  carNo = carNo.substring(0, carNo.length - 1);  if(carNo.length == 0) {   this.setData({    inputType: 1   })  }  this.setData({   carNo,  }) }, /* 判断车牌号 */ isCarPlate(value) {  return /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(value); }})

父组件index.css

.container{ height: 100vh; background: #fff;}.translateView{ background: #eee;}.list{ margin-bottom: 20rpx; background: #fff;}.list:last-child{ margin: 0;}.item{ display: flex; padding: 0 26rpx; width: 100%; height: 116rpx; box-sizing: border-box; align-items: center; border-bottom: 1px solid #eee;}.item:last-child{ border: none;}.label{ margin-right: 10rpx; width: 140rpx;}.contentBox{ display: flex; width: calc(100% - 150rpx); height: 90rpx; align-items: center; justify-content: space-between;}.promptText{ color: #c7c7c7;}.inputBox{ width: 100%; height: 80rpx; line-height: 80rpx;}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

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


  • 上一条:
    详解解决小程序中webview页面多层history返回问题
    下一条:
    微信小程序实现定位及到指定位置导航的示例代码
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 在go语言中使用GoPDF包把html生成PDF文件示例(0个评论)
    • 在go语言中创建和解析(读取)符号链接示例(0个评论)
    • ubuntu 22.04系统中报错:Python 3.6 is no longer supported by the Python core team...解决方式(0个评论)
    • Laravel 10.4版本发布(0个评论)
    • mysql5.7中实现分区表及分区where in查询示例及分区分表对比浅析(0个评论)
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客