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


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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 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
简单谈谈favicon
2015/06/10 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
JS功能代码集锦
2016/05/04 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
React中的render何时执行过程
2018/04/13 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
用Python设计一个经典小游戏
2017/05/15 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python生成并处理uuid的实现方式
2020/03/03 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
幼儿园大班毕业感言
2014/02/06 职场文书
经典演讲稿汇总
2014/05/19 职场文书
雷人标语集锦
2014/06/19 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers