键盘已做过处理第一位只能是省份简称，第二位只能输入字母，第三位以后可以输入数字加字母的组合，输入完成后有正则方法校验车牌号的合法性。高效率车牌号输入键盘，大大提升用户体验，增强用户输入车牌号的真实性

组件源码

html：
<view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{{backgroundColor}}">
<view class='offkey' bindtap='offkr'>关闭键盘</view>
<!--省份简写键盘-->
<block wx:if="{{keyBoardType === 1}}"><view class="vehicle-panel-row"><view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyVehicle1}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view></view><view class="vehicle-panel-row"><view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyVehicle2}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view></view><view class="vehicle-panel-row"><view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyVehicle3}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view></view><view class="vehicle-panel-row-last"><view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-last' bindtap='vehicleTap' data-value="{{item}}" wx:for="{{keyVehicle4}}" style="border:{{buttonBorder}}" wx:for-index="idx"wx:key="idx">{{item}}</view></view>
</block>
<block wx:else><!--数字键盘  --><block wx:if="{{numBoard==true}}"><view class="vehicle-panel-row"><view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-number' bindtap='vehicleTap' data-value="{{item}}" wx:for="{{keyNumber}}" style="border:{{buttonBorder}}" wx:for-index="idx"wx:key="item">{{item}}</view></view></block><!--英文键盘  --><view class="vehicle-panel-row"><view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyEnInput1}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view></view><view class="vehicle-panel-row"><view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyEnInput2}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view><view hover-class="vehicle-hover" style="border:{{buttonBorder}}" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-img'><image src='../../images/delete.png' class='vehicle-en-button-delete' bindtap='vehicleTap' data-value="delete" mode='aspectFit'>删除</image></view></view><view class="vehicle-panel-row-last"><view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-last' bindtap='vehicleTap' style="border:{{buttonBorder}}" data-value="{{item}}" wx:for="{{keyEnInput3}}" wx:for-index="idx"wx:key="idx">{{item}}</view><view hover-class="vehicle-hover" style="border:{{buttonBorder}}" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-ok' bindtap='vehicleTap' data-value="ok">完成</view></view>
</block>
</view>

css:
:host {width: 100%;
}.vehicle-panel {width: 100%;position: fixed;bottom: 0;display: flex;flex-direction: column;justify-content: center;z-index: 1000;
}
.offkey{text-align: center;font-size: 30rpx;
}
.vehicle-panel-row {display: flex;justify-content: space-between;align-items: center;
}.vehicle-panel-row-last {display: flex;justify-content: space-between;align-items: center;
}.vehicle-panel-row-button {background-color: #fff;margin: 5rpx;padding: 5rpx;width: 80rpx;height: 80rpx;text-align: center;line-height: 80rpx;border-radius: 10rpx;
}.vehicle-panel-row-button-number {background-color: #eee;
}.vehicle-panel-row-button-last {width: 90rpx;height: 90rpx;line-height: 90rpx;
}.vehicle-hover {background-color: #ccc;
}.vehicle-panel-row-button-img {display: flex;justify-content: center;align-items: center;
}.vehicle-en-button-delete {width: 55rpx;height: 85rpx;
}.vehicle-panel-ok {background-image: linear-gradient(0deg, #00a878 0%, #00cddc 100%),linear-gradient(#413f3f, #413f3f);color: #fff;width: 150rpx;height: 80rpx;font-size: 30rpx;
}

js：
Component({externalClasses: ['v-panel'],properties: {isShow: {type: Boolean,value: false,},buttonBorder: {type: String,value: "1px solid #ccc"},backgroundColor: {type: String,value: "#fff"},//1为省份键盘，其它为英文键盘keyBoardType: {type: Number,value: 1,},//true 显示键盘数字部分  numBoard: {type: Boolean,value: false,}},data: {keyVehicle1: '陕京津沪冀豫云辽',keyVehicle2: '黑湘皖鲁新苏浙赣',keyVehicle3: '鄂桂甘晋蒙吉闽贵',keyVehicle4: '粤川青藏琼宁渝',keyNumber: '1234567890',keyEnInput1: 'QWERTYUIOP',keyEnInput2: 'ASDFGHJKL',keyEnInput3: 'ZXCVBNM',},methods: {offkr:function(){let that = this;that.setData({isShow: false,})},vehicleTap: function(event) {let val = event.target.dataset.value;switch (val) {case 'delete':this.triggerEvent('delete');// this.triggerEvent('inputchange');break;case 'ok':this.triggerEvent('ok');break;default:this.triggerEvent('inputchange', val);}},}
});
json:
{"component": true
}

组件使用方法

<v-panel is-show="{{isShow}}" bindok="inputOk" binddelete="inputdelete" numBoard="{{numBoard}}" bindinputchange="inputChange" key-board-type="{{keyBoardType}}" backgroundColor="white" /><view class="text_con_focus" bindtap="bindFocus">车牌号：{{textValue}}<text class='focus_move'>|</text>
</view>
.focus_move {color: green;font-size: 30rpx;animation: focus 0.7s infinite;
}/* 光标动画 */@keyframes focus {from {opacity: 1;}to {opacity: 0;}
}
.text_con_focus{font-size: 30rpx;
}
var car_num = ""
Page({data: {textValue: "", //最终的输入内容keyBoardType: 1, //控制键盘显示类型,1为省份简写,2为英文简写numBoard: false, //控制  是否显示 英文简写中的数字部分键盘  true 为显示isShow: false, //控制键盘是否显示,true显示，false不显示},onShow: function () {},//控制键盘显示bindFocus: function(e) {let that = this;that.setData({isShow: true,})},//键盘输入事件inputChange: function(e) {let car_val = e.detail;let that = this;//超过8位后截取前8位if (that.data.textValue.length >= 8) {car_num = that.data.textValue.substr(0, 8)}else{car_num += car_val;}is_show(that, car_num)},//键盘删除事件inputdelete: function(e) {let that = this;car_num = car_num.substring(0, car_num.length - 1)console.log(car_num)is_show(that, car_num)},//确定事件inputOk:function(e) {let that = this;that.setData({isShow: false,})console.log(that.data.textValue)},
})//控制键盘的方法包装
function is_show(that,val) {//1为省份简写,2为英文简写if (val.length >= 1) {that.setData({keyBoardType: 2,})} else {that.setData({keyBoardType: 1,})}//控制  是否显示数字部分键盘if (val.length >= 2) {that.setData({numBoard: true,})} else {that.setData({numBoard: false,})}that.setData({textValue: car_num})
}
{"component": true,"usingComponents": {"v-panel": "../../componet/select_car_number/select_car_number"}
}

微信小程序自定义车牌号输入键盘-附源码相关推荐

微信小程序支付功能-服务器端实现(附源码)
实现了小程序最新的V3版本支付功能, 包括:支付.支付通知.退款.退款通知. 服务器端使用java开发,springboot框架源码链接在评论中微信小程序支付功能-服务器端实现(附源码)_哔哩哔哩 ...
微信小程序实现快递查询功能(附源码)
目录效果图项目结构快递查询API获取微信小程序后台配置页面代码 express页面代码 logistics页面代码注意问题(使用必看) 留言效果图项目结构快递查询API获取这里我使 ...
springboot基于微信小程序的选课系统毕业设计-附源码060000
目录摘要 1 1 绪论 1 1.1研究背景 1 1.2开发意义 1 1.3系统开发技术的特色 1 1.4论文结构与章节安排 1 2选课系统小程序系统分析 3 2.1 可行性分析 3 2.2 系统流 ...
微信小程序实现购物商城（附源码）
2018年本人做了一个淘宝购物返利的微信公众号,截至目前已运营了近5年的时间,也陆续积累了不少粉丝.近日,有部分用户反馈是否可以在公众号上展示促销商品列表,而且要具备搜索功能.为感谢粉丝朋友们的长期支 ...
小程序源码免费html5,微信小程序静态页面案例（附源码）
微信小程序出来有段时间了,最近抽空写了个静态案例练练手.由于没有公测名额,无法测试,没有接口,所以先这样吧. 首先上图,整个app的演示是这样的: 图一一.微信小程序和html5标签的区别: 二.w ...
微信小程序推送模板教程附源码
无聊的时候玩一下小功能踩踩坑首先模板推送需要准备一些材料准备材料:1)公众号|小程序,添加选择的模板消息,2)在设置>开发设置页面,开通消息模板功能:如: 如果还没模板素材的请新建一 ...
html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...
微信小程序输入车牌号（有新能源）
微信小程序输入车牌号(有新能源) <view class="page"><view class="carN ...
微信小程序模拟车牌号键盘
微信小程序模拟车牌号键盘效果图中文键盘英文数字键盘项目地址:https://github.com/ushars/keyboard

微信小程序自定义车牌号输入键盘-附源码

组件源码

组件使用方法

微信小程序自定义车牌号输入键盘-附源码相关推荐

最新文章

热门文章