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


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下:nth-child(an+b)的使用注意
May 28 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
vue params、query传参使用详解
Sep 12 Javascript
微信小程序实现评论功能
Nov 28 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python中的生成器和yield详细介绍
2015/01/09 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
职称评定自我鉴定
2014/03/18 职场文书
表彰大会主持词
2014/03/26 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
党员个人自我评价
2015/03/03 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS