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


Posted in Javascript onAugust 20, 2019

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

1.效果图

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

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

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

组件代码index.wxml

<view class="carPlate" wx:if="{{show}}">
 <block wx:if="{{type==1}}">
  <view class="wordList">
   <view class="wordItem" wx:for="{{cityKeyword1}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{cityKeyword2}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{cityKeyword3}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{cityKeyword4}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
  </view>
 </block>
 <block wx:else>
  <view class="wordList">
   <view class="wordItem" wx:for="{{keyNumber}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{wordList1}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{wordList2}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
   <view class="wordItem wordClear" bindtap="handleClick" data-item="delete">
    <image src="/images/input-clear.png" class="clearImg"></image>
   </view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{wordList3}}" wx:key="{{item}}" bindtap="handleClick" data-item="{{item}}">{{item}}</view>
   <view class="wordItem wordConfirm" bindtap="handleClick" data-item="confirm">确定</view>
  </view>
 </block>
</view>

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

<view class="container" bindtap="handlePlateConfirm">
 <view class="translateView" style="transform: translateY({{translateSpace}}px)">
  <view class="list">
   <view class="item">
    <view class="label">*车牌号码</view>
    <view class="contentBox" catchtap="handleClick">
     <view class="inputBox" wx:if="{{carNo}}">{{carNo}}</view>
     <view class="promptText" wx:else>请输入车牌号</view>
    </view>
   </view>
  </view>
 </view>
</view>
<car-plate show="{{showPlateInput}}" bindchange="handlePlateChange" type="{{inputType}}" bindconfirm="handlePlateConfirm" binddelete="handlePlateDelete" />

父组件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;
}

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

Javascript 相关文章推荐
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
javascript修改图片src的方法
Jan 27 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
详解jQuery事件
Jan 13 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
解决Layui中layer报错的问题
Sep 03 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 #Javascript
Vue实现购物车详情页面的方法
Aug 20 #Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 #Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 #Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 #Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 #Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 #Javascript
You might like
PHP迭代器的内部执行过程详解
2013/11/12 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
python中引用与复制用法实例分析
2015/06/04 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
制药工程专业个人求职自荐信
2014/01/25 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
学徒工职责
2014/03/06 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书