微信小程序开发车牌输入软键盘demo
微信小程序代码---下载地址【https://download.csdn.net/download/JackieDYH/14109617】
test1
js
// pages/test1/test1.js
// pages/test1/test1.js
Page({
data: {
territory: "浙",
plateNo: "",
plate:"",
},
//开启 地域选择键盘
open: function () { this.setData({ isShow: true, keyBoardType: 1 }); },
//开启 车牌选择键盘
openInput: function () { this.setData({ isShow: true, keyBoardType: 2 });},
//关闭键盘
close: function () { this.setData({ isShow: false });},
//点击了删除
delete: function (e) {
if (this.data.plate.length == 0){
this.setData({keyBoardType: 1});
}else{
this.setData({ plateNo: this.data.plateNo.substring(0, this.data.plateNo.length - 1),plate: this.data.plate.substring(0, this.data.plate.length - 1)});
if (this.data.plate.length == 0){
this.setData({keyBoardType: 1});
}
}
},
//点击键盘
click: function (e) {
var val = e.detail;
if (!val) return;
console.log(e)
if (this.data.plate.length == 0){
this.setData({ plate: val,keyBoardType: 2 });
}else if(this.data.plate.length < 7){
this.setData({plate: this.data.plate + val});
}
//汉字 正则表达式
// var reg = new RegExp('[u4E00-u9FFF]+', 'g');
// if (!reg.test(val)) {
// this.setData({ territory: val, keyBoardType: 2 });
// } else {
// if (this.data.plateNo.length == 7) return;
// this.setData({ plateNo: this.data.plateNo + val });
// }
},
//点击了 小键盘确认
ok: function (e) { this.setData({ isShow: false }); },
//单击查询按钮
select: function(){
wx.showToast({
title: "车牌号:" + this.data.territory+this.data.plateNo,
icon: 'none'
});
}
})
================================
Page({
data: {
territory: "浙",
plateNo: "",
},
//开启 地域选择键盘
open: function () { this.setData({ isShow: true, keyBoardType: 1 }); },
//开启 车牌选择键盘
openInput: function () { this.setData({ isShow: true, keyBoardType: 2 });},
//关闭键盘
close: function () { this.setData({ isShow: false });},
//点击了删除
delete: function (e) {
this.setData({ plateNo: this.data.plateNo.substring(0, this.data.plateNo.length - 1) });
},
//点击键盘
click: function (e) {
var val = e.detail;
if (!val) return;
//汉字 正则表达式
var reg = new RegExp('[u4E00-u9FFF]+', 'g');
if (!reg.test(val)) {
this.setData({ territory: val, keyBoardType: 2 });
} else {
if (this.data.plateNo.length == 7) return;
this.setData({ plateNo: this.data.plateNo + val });
}
},
//点击了 小键盘确认
ok: function (e) { this.setData({ isShow: false }); },
//单击查询按钮
select: function(){
wx.showToast({
title: "车牌号:" + this.data.territory+this.data.plateNo,
icon: 'none'
});
}
})json
{
"component": true,
"usingComponents": {
"v-panel": "/vehicle-panel/custom-keyboard/custom-keyboard"
}
}wxml
<!--test1.wxml-->
<!-- <view class='test' catchtap="close" style='height:999px;'>
<button catchtap='open'>{{territory}}</button>
<button catchtap='openInput'>{{plateNo?plateNo:'点击输入'}}</button>
<button bindtap='select'>查询</button>
</view> -->
<view bindtap="open">{{plate?plate:'点击输入'}}</view>
<v-panel is-show="{{isShow}}" bindok="inputOk" binddelete="delete" bindinputchange="click" bindok="ok" key-board-type="{{keyBoardType}}" backgroundColor="white" />vehicle-panel
js
Component({
// externalClasses: ['v-panel'],
properties: {
isShow: {
type: Boolean,
value: true,
},
buttonBorder: {
type: String,
value: "1px solid #ccc"
},
backgroundColor: {
type: String,
value: "#fff"
},
//1为省份键盘，其它为英文键盘
keyBoardType: {
type: Number,
value: 1,
}
},
data: {
keyVehicle1: '京沪浙苏粤鲁晋冀',
keyVehicle2: '豫川渝辽吉黑皖鄂',
keyVehicle3: '湘赣闽陕甘宁蒙津',
keyVehicle4: '贵云桂琼青新藏',
keyNumber: '1234567890',
keyEnInput1: 'ABCDEFGHJK',
keyEnInput2: 'LMNPQRSTU',
keyEnInput3: 'VWXYZ港澳学',
},
methods: {
vehicleTap: function (event) {
let val = event.target.dataset.value;
switch (val) {
case 'delete':
console.log("111111");
this.triggerEvent('delete');
this.triggerEvent('inputchange');
break;
case 'ok':
console.log("22222");
this.triggerEvent('ok');
break;
default:
console.log("333333" + val);
this.triggerEvent('inputchange', val);
}
},
}
});
========================================
Component({
// externalClasses: ['v-panel'],
properties: {
isShow: {
type: Boolean,
value: true,
},
buttonBorder: {
type: String,
value: "1px solid #ccc"
},
backgroundColor: {
type: String,
value: "#fff"
},
//1为省份键盘，其它为英文键盘
keyBoardType: {
type: Number,
value: 1,
}
},
data: {
keyVehicle1: '京沪浙苏粤鲁晋冀',
keyVehicle2: '豫川渝辽吉黑皖鄂',
keyVehicle3: '湘赣闽陕甘宁蒙津',
keyVehicle4: '贵云桂琼青新藏',
keyNumber: '1234567890',
keyEnInput1: 'QWERTYUIOP',
keyEnInput2: 'ASDFGHJKL',
keyEnInput3: 'ZXCVBNM',
},
methods: {
vehicleTap: function (event) {
let val = event.target.dataset.value;
switch (val) {
case 'delete':
console.log("111111");
this.triggerEvent('delete');
this.triggerEvent('inputchange');
break;
case 'ok':
console.log("22222");
this.triggerEvent('ok');
break;
default:
console.log("333333" + val);
this.triggerEvent('inputchange', val);
}
},
}
});
json
{
"component": true,
"usingComponents": {}
}wxml
<view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{{backgroundColor}}">
<!--省份简写键盘-->
<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>
<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>
<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='delete.svg' 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>
wxss
:host {
width: 100%;
}
.vehicle-panel {
width: 100%;
position: fixed;
bottom: 0;
display:flex;
flex-direction:column;
justify-content:center;
z-index: 1000;
}
.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-color: #0F4BA1;
color: #fff;
width: 150rpx;
height: 80rpx;
}
delete.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1544597298820" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5281" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><defs><style type="text/css"></style></defs><path d="M911.36 204.8H317.44c-20.48 0-40.96 15.36-56.32 25.6l-204.8 204.8c-46.08 40.96-46.08 112.64 0 158.72l204.8 204.8c15.36 5.12 30.72 20.48 56.32 20.48h593.92c46.08 0 87.04-40.96 87.04-97.28V302.08c0-56.32-40.96-97.28-87.04-97.28z m-138.24 414.72c10.24 10.24 10.24 25.6 0 35.84-5.12 10.24-15.36 10.24-20.48 10.24s-15.36 0-20.48-5.12l-107.52-107.52-107.52 107.52c-5.12 5.12-15.36 5.12-20.48 5.12s-15.36 0-20.48-5.12c-10.24-10.24-10.24-25.6 0-35.84l107.52-107.52-107.52-112.64c-10.24-10.24-10.24-25.6 0-35.84s25.6-10.24 35.84 0l107.52 107.52 107.52-107.52c10.24-10.24 25.6-10.24 35.84 0s10.24 25.6 0 35.84l-102.4 107.52 112.64 107.52z" p-id="5282"></path></svg>
本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17634398.html
