小程序模拟输入车牌号键盘

wxml

       <view class=''>车牌号</view><view class='to-flex-center-between' bindtap='licensePlateNumber'><view bindtap='getFocus' class='codeView to-relative margin-top-small'><view class='codeTab {{codeList.length>0?"codeTabFocus":""}}'>{{codeList[0]}}</view><view class='codeTab {{codeList.length>1?"codeTabFocus":""}}'>{{codeList[1]}}</view><view class='codeTab {{codeList.length>2?"codeTabFocus":""}}'>{{codeList[2]}}</view><view class='codeTab {{codeList.length>3?"codeTabFocus":""}}'>{{codeList[3]}}</view><view class='codeTab {{codeList.length>4?"codeTabFocus":""}}'>{{codeList[4]}}</view><view class='codeTab {{codeList.length>5?"codeTabFocus":""}}'>{{codeList[5]}}</view><view class=' codeTab {{codeList.length>6?"codeTabFocus":""}}'>{{codeList[6]}}</view><view class=' codeTab {{codeList.length>7?"codeTabFocus":""}}'>{{codeList[7]}}<image src='/images/xinnengyuan-icon.png' style='width:68rpx;height:auto;right:-10rpx;top:-10rpx;position:absolute' mode='widthFix'></image></view></view></view>

因为模拟不了原生间键盘会让整个页面如果遮挡住了往上弹起特将键盘写成弹框模式

<!-- 输入车牌号弹框 -->
<view class='shadow' wx:if='{{ plateListFlag }}'></view>
<view wx:if='{{ plateListFlag }}' class='plateList box-sizing'><view class='to-flex-center-between ' style='padding:0 40rpx;margin-bottom:20rpx'><view class='color-11141A font-size-bigger font-weight-bold'>车牌号</view><image src='/images/cancel-black.png' style='width:44rpx;height:auto' mode='widthFix' bindtap='cancelPlate'></image></view><view class='login_input  border-color-EFF1F4' style='padding-bottom:40rpx;'><input disabled='true' value='{{ licensePlateNumber }}'></input><view bindtap='getFocus' class='codeView to-relative' style='margin:0 32rpx'><view class='codeTab {{licensePlateNumberList.length>0?"codeTabFocus":""}}'>{{licensePlateNumberList[0]}}</view><view class='codeTab {{licensePlateNumberList.length>1?"codeTabFocus":""}}'>{{licensePlateNumberList[1]}}</view><view class='codeTab {{licensePlateNumberList.length>2?"codeTabFocus":""}}'>{{licensePlateNumberList[2]}}</view><view class='codeTab {{licensePlateNumberList.length>3?"codeTabFocus":""}}'>{{licensePlateNumberList[3]}}</view><view class='codeTab {{licensePlateNumberList.length>4?"codeTabFocus":""}}'>{{licensePlateNumberList[4]}}</view><view class='codeTab {{licensePlateNumberList.length>5?"codeTabFocus":""}}'>{{licensePlateNumberList[5]}}</view><view class=' codeTab {{licensePlateNumberList.length>6?"codeTabFocus":""}}'>{{licensePlateNumberList[6]}}</view><view class=' codeTab {{licensePlateNumberList.length>7?"codeTabFocus":""}}'>{{licensePlateNumberList[7]}}<image src='/images/xinnengyuan-icon.png' style='width:68rpx;height:auto;right:-10rpx;top:-10rpx;position:absolute' mode='widthFix'></image></view></view></view><view class='container margin-top-lit-big box-sizing' hidden='{{licensePlate_provinces_Box}}'><view wx:for='{{ plateList}}' bindtap='licensePlate_provinces' data-id='{{ index }}' data-licensePlateProvinces='{{item}}' wx:key='index' class='box-sizing palteClass'>{{ item }}</view><i wx:for='{{plateList.length-1 }}' wx:key='index'></i><view class='to-absolute to-flex' style='right:32rpx;bottom:46rpx;'><view class='dele-icon' bindtap="licensePlate_delete"><image src='/images/dele-icon.png' style='width:40rpx;height:auto;' mode='widthFix'></image></view><view class='confirm-btn' bindtap="confirmBtn">完成</view></view></view><view class='container margin-top-lit-big box-sizing' hidden='{{licensePlate_letter_Box}}'><block wx:if='{{ licensePlate_digital_Box }}'><view wx:for='{{ licensePlate_digital}}' class='box-sizing palteClass' style='color:#ccc;border-color:#ccc'>{{ item }}</view></block><block wx:else><view wx:for='{{ licensePlate_digital}}' bindtap='licensePlate_digital' data-id='{{ index }}' data-licensePlateProvinces='{{item}}' wx:key='index' class='box-sizing palteClass'>{{ item }}</view></block><view wx:for='{{ licensePlate_letter}}' bindtap='licensePlate_letter' data-id='{{ index }}' data-licensePlateProvinces='{{item}}' wx:key='index' class='box-sizing palteClass'>{{ item }}</view><i wx:for='{{plateList.length-1 }}' wx:key='index'></i><view class='to-absolute to-flex' style='right:32rpx;bottom:46rpx;'><view class='dele-icon' bindtap="licensePlate_delete"><image src='/images/dele-icon.png' style='width:40rpx;height:auto;' mode='widthFix'></image></view><view class='confirm-btn' bindtap="confirmBtn">完成</view></view></view>
</view>

对应的wxss

/* 车牌号输入框的样式 */.plateList {padding: 32rpx 0rpx;position: fixed;bottom: 0;background: #fff;width: 100%;z-index: 100
}.palteClass {border: 0.5rpx solid #c5c9d2;width: 60rpx;height: 84rpx;line-height: 84rpx;text-align: center;margin-right: 6rpx;margin-bottom: 20rpx;border-radius: 10rpx;color: #424752;font-size: 40rpx;
}
.container > i {width: 60rpx;
}
.car-number-wrapper{padding: 40rpx;box-sizing: border-box;display: flex;align-items: center;width: 686rpx;margin-left: 32rpx;
}
.container{display: flex;justify-content: space-between;flex-wrap: wrap;padding: 0 32rpx;
}
/* 使用伪元素辅助左对齐 */
.container::after {content: '';flex: auto;    /* 或者flex: 1 */
}
.single-number{height: 88rpx;
line-height: 88rpx;
text-align: center;
width: 78rpx;border-radius: 12rpx;border: 2rpx solid #C5C9D2;margin-right: 8rpx;
}
.dele-icon{width: 100rpx;height: 84rpx;line-height: 84rpx;
margin-right: 10rpx;
background: #ADB4BD;
border-radius: 12rpx;
text-align: center
}
.confirm-btn{text-align: center;background: #00C1C1;color: #fff;width: 140rpx;height: 84rpx;line-height: 84rpx;border-radius: 12rpx;
}.login_input {display: flex;align-items: center;padding: 15rpx 0;border-bottom: 0.5rpx solid #c5c9d2;
}.login_input .input_text {font-size: 30rpx;color: #c5c9d2;margin-top: 7rpx;
}.login_input input {font-size: 30rpx;font-weight: 500;height: 40rpx;/* width: 100%; */width: 0%;
}.codeView {width: 100%;height: 68rpx;display: flex;white-space: nowrap;align-items: center;justify-content: space-between
}.codeTab {margin-right: 7rpx;width: 64rpx;height: 68rpx;line-height: 68rpx;border-radius: 12rpx;text-align: center;border: 1rpx solid #c5c9d2;
}.codeTabFocus {border: 1rpx solid #1566fe;color: #1566fe;
}.noBorder {border: none;
}

对应的js

data:{licensePlateShowHidden: true,licensePlate_provinces_Box: true,licensePlate_letter_Box: true,licensePlate_digital_Box: true,licensePlateNumber:'',plateList: ["京", "沪", "浙", "苏", "粤", "鲁","晋", "冀", "豫", "川", "渝", "辽","吉", "黑", "皖", "鄂", "津", "贵","云", "桂", "琼", "青", "新", "藏","蒙", "宁", "甘", "陕", "闽", "赣","湘"],licensePlate_letter: ["A", "B", "C", "D", "E", "F","G", "H", "L", "J", "K", "L","M", "N", "O", "P", "Q", "R","S", "T", "U", "V", "W", "X","Y", "Z"],licensePlate_digital: ["1", "2", "3","4", "5", "6","7", "8", "9","0"],codeFocus: false, //input焦点
},// 显示模拟键盘licensePlateNumber: function () {var that = this;var licensePlateNumber = this.data.licensePlateNumber;var licensePlateNumberLen = licensePlateNumber.length;console.log(licensePlateNumber, licensePlateNumberLen)if (licensePlateNumberLen == 0) {this.setData({licensePlateShowHidden: false,licensePlate_provinces_Box: false,})} else if (licensePlateNumberLen == 1) {this.setData({licensePlateShowHidden: false,licensePlate_letter_Box: false,})} else {this.setData({licensePlateShowHidden: false,licensePlate_digital_Box: false,})}this.setData({plateListFlag:true})},// 点击获取省份licensePlate_provinces: function (e) {this.setData({licensePlateNumber: e.target.dataset.licenseplateprovinces,licensePlateNumberList: [e.target.dataset.licenseplateprovinces],licensePlate_letter_Box: false,licensePlate_digital_Box: true,licensePlate_provinces_Box:true})console.log(e.target.dataset.licenseplateprovinces)console.log(this.data.licensePlateNumberLists)},// 点击获取字母licensePlate_letter: function (e) {var licensePlateNumber = this.data.licensePlateNumber;var licensePlateNumberLen = licensePlateNumber.length;var arr = licensePlateNumber + e.target.dataset.licenseplateprovincesif (licensePlateNumberLen != 8) {this.setData({licensePlateNumber: licensePlateNumber + e.target.dataset.licenseplateprovinces,licensePlateNumberList: arr.split('')})console.log(e.target.dataset.licenseplateprovinces)console.log(this.data.licensePlateNumberList)} else {wx.showToast({title: '车牌号码最多不能超过8位',icon: 'none',duration: 1500,})}this.setData({licensePlate_digital_Box:false})},// 点击获取数字licensePlate_digital: function (e) {var licensePlateNumber = this.data.licensePlateNumber;var licensePlateNumberLen = licensePlateNumber.length;var arr2 = licensePlateNumber + e.target.dataset.licenseplateprovincesif (licensePlateNumberLen != 8) {this.setData({licensePlateNumber: licensePlateNumber + e.target.dataset.licenseplateprovinces,licensePlateNumberList: arr2.split(''),})console.log(e.target.dataset.licenseplateprovinces)} else {wx.showToast({title: '车牌号码最多不能超过8位',icon: 'none',duration: 1500,})}},cancelPlate:function(){this.setData({licensePlateNumber: '',licensePlateNumberList:[],plateListFlag:false})},confirmBtn: function () {var licensePlateNumber = this.data.licensePlateNumberif (licensePlateNumber){if(licensePlateNumber.length<7){wx.showToast({title: '车牌号码不能低于7位',icon: 'none',duration: 1500,})}else{console.log(licensePlateNumber.split(''))this.setData({plateListFlag: false,codeList: licensePlateNumber.split('')})}}else{console.log(licensePlateNumber)}},// 删除licensePlate_delete: function (e) {var licensePlateNumber = this.data.licensePlateNumber;var licensePlateNumberLen = licensePlateNumber.length;var licensePlateNumberDelete = licensePlateNumber.split('');var newLicensePlateNumber = licensePlateNumberDelete.join('').slice(0, -1)var newLicensePlateNumber1 = licensePlateNumberDelete.join('').slice(0, -1)if (licensePlateNumberDelete.slice(0, -1).length == 1) {this.setData({licensePlate_provinces_Box: true,licensePlate_letter_Box: false,licensePlate_digital_Box: true,})} else if (licensePlateNumberLen == 0 || licensePlateNumber == '' || licensePlateNumberDelete.slice(0, -1).length == 0) {this.setData({licensePlate_provinces_Box: false,licensePlate_letter_Box: true,licensePlate_digital_Box: true,})}this.setData({licensePlateNumber: newLicensePlateNumber,licensePlateNumberList: newLicensePlateNumber1,})},

小程序模拟输入车牌号键盘相关推荐

微信小程序模拟车牌号键盘
微信小程序模拟车牌号键盘效果图中文键盘英文数字键盘项目地址:https://github.com/ushars/keyboard
微信小程序输入车牌号（有新能源）
微信小程序输入车牌号(有新能源) <view class="page"><view class="carN ...
微信小程序实现车牌号录入
实现效果如下图所示: 废话不多说,直接上代码,如果有需要直接复制代码到项目里面,注册组件即可. <view class="modal-box"><view cla ...
微信小程序自定义车牌号输入键盘-附源码
键盘已做过处理第一位只能是省份简称,第二位只能输入字母,第三位以后可以输入数字加字母的组合,输入完成后有正则方法校验车牌号的合法性.高效率车牌号输入键盘,大大提升用户体验,增强用户输入车牌号的真实性 ...
微信小程序新能源车牌号
<view class='che'><view bindtap='go'>请输入要办理ETC车辆的的车牌号</view><view class='fle'&g ...
微信小程序车牌号组件，车牌号键盘，兼容新能源号牌
话不多说,先看图使用方法: 一.将组件代码放入项目任意目录二.在需要使用键盘组件的页面json文件配置引入组件三.在模板页面wxml调用组件 <carNumber custom-input ...
小程序input调用虚拟键盘阻止系统键盘与虚拟键盘点击穿透问题
解决小程序input调用虚拟键盘并阻止调用系统键盘问题与虚拟键盘点击穿透导致下方input获焦问题点击input弹出虚拟键盘,并不调起系统键盘解决方案 wxml代码 <input type=& ...
小程序 input自动聚焦唤起键盘
小程序 input自动聚焦唤起键盘 <input type="text" focus='true' bindconfirm="onConfirm" con ...
微信小程序input为数字键盘
微信小程序input为数字键盘微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点 ...

小程序模拟输入车牌号键盘

小程序模拟输入车牌号键盘相关推荐

最新文章

热门文章