添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
活泼的鸭蛋  ·  Delphi XE Resize PNG ...·  2 年前    · 
要出家的感冒药  ·  android studio layout ...·  2 年前    · 

小程序原生写法手写自定义键盘,订制车牌号输入键盘

前段时间接了个ETC的 支付宝小程序 项目。流程中用到了车牌号输入键盘,由于小程序没有相应的扩展组件,只能手写一个自定义的键盘。

键盘的逻辑根据需求控制

  1. 点击键盘区域触发弹出自定义键盘,第一步要求必须输入简称,
  2. 当车牌号为空时只允许用户输入省份简称,输入第一位简称后无需点击下一步操作自动切换到数字字母键盘,
  3. 规定第二位必须为字母,判断此时只能输入至少一位字母,数字键盘默认不可点击,
  4. 当用户第二位输入字母后将数字设置为可以点击,
  5. 本次客户需求只考虑7位车牌,输入满七位后不可再输入, 返回 按钮切换为 完成 按钮,点击关闭键盘,

选择省份简称
输入省份简称

输入数字字母,第二位必须为字母
输入数字字母

最多输入七位车牌号,da输入七位后显示完成按钮 最多输入七位车牌

输滑动屏幕或点击空白收起键盘 滑动或点击空白区域隐藏键盘

输入键盘+车牌颜色选择 完整代码

AXML页面结构 keyboard.axml .

<view class="add-car-container">
  <view class="add-list-box">
    <view class="card-num-con">
      </text>
      <view class='carnum' onTap="backKeyboard" disabled="{{canNotChange}}">
        <block a:for="{{7}}">
          <text class="{{carnum.length==index?'carnum-blue':''}}">{{carnum.split('')[index]}}</text>
        </block>
      </view>
    </view>
    <view class="chose-color">
      </text>
      <radio-group class="radio-group" onChange="radioChange">
        <label a:for="{{items}}" class="radio {{item.name}}">
          <radio value="{{item.key}}"  checked="{{item.checked}}" class="unchose" />
          <icon a:if="{{item.checked}}" type="success" size="20"/>
          <text>{{item.value}}</text>
        </label>
      </radio-group>
    </view>
  </view>
</view>
<!-- 键盘结构 -->
<view class="keyboard" hidden="{{hiddenPro&&hiddenStr}}" catchTap="stopPropagation">
  <view class="keyboard-mini" >
    <!-- 限制键盘 -->
    <!-- 省键盘 -->
    <view class="provinces" hidden="{{hiddenPro}}">
      <view class="pro-li fl" a:for="{{provinceArr}}" catchTap="proTap" data-province="{{item}}">{{item}}</view>
    </view>
    <!-- 号码键盘	 -->
    <view class="keyNums" hidden="{{hiddenStr}}">
        class="pro-li fl" 
        a:for="{{strArr}}" 
        :key="{{index}}" 
        catchTap="strTap" 
        disabled="{{strDisabled||(notNum&&index<10)}}" 
        data-str="{{item}}">
          {{item}}
      </view>
      <view class="bot fl">
        <view class="kb-icon kb-hide fl pro-li" catchTap="backSpace">删除</view>
        <view class="kb-icon kb-hide fl pro-li {{downBtn=='完成'?'down-blue':''}}" catchTap="applyNum" >{{downBtn}}</view>
      </view>
    </view>
  </view>
</view>;

acss页面样式 keyboard.acss.

 page {
   background-color: #f5f5f5;
   font-size: 34rpx;
 .radio-group label {
   width: 160rpx;
   height: 55rpx;
   text-align: center;
   border-radius: 8rpx;
   vertical-align: middle;
   margin-left: 20rpx;
   line-height: 60rpx;
   display: inline-block;
 .radio-group label radio {
   vertical-align: middle;
   transform: scale(0.8);
   height: 28rpx;
   line-height: 32rpx;
   vertical-align: top;
 .radio-group label text {
   font-size: 32rpx;
   height: 60rpx;
   line-height: 60rpx;
   vertical-align: top;
   display: inline-block;
 .iconShape {
   color: #108EE9;
   font-size: 32rpx;
   margin-right: 10rpx;
 .radio-group .yellow {
   background-color: #FCEBC7;
 .radio-group .blue {
   background-color:




    
 #CCE9FF;
 .unchose {
   display: none;
 .chose-color {
   display: flex;
   justify-content: space-between;
   padding: 22rpx 32rpx;
   border-bottom: 1px solid #eeeeee;
   line-height: 60rpx;
   background-color: #fff;
 .changeInfoName input {
   width: 100%;
   height: 100%;
   padding: 0;
 .radio-group label radio {
   vertical-align: middle;
   transform: scale(0.8);
   height: 32rpx;
   line-height: 32rpx;
   vertical-align: top;
   margin-top: 8rpx;
 .radio-group .gray {
   background-color: #eeeeee;
 .radio-group .blue {
   background-color: #CCE9FF;
 .card-num-con {
   display: flex;
   -webkit-box-pack: justify;
   justify-content: space-between;
   padding: 16rpx 32rpx 16rpx 0;
   margin-left: 32rpx;
   border-bottom: 1px solid rgb(238, 238, 238);
   line-height: 0.7rem;
   width: 90%;
   background-color: rgb(255, 255, 255);
 .add-list-box {
   background-color: #ffffff;
 icon {
   height: 40rpx;
   margin: 8rpx;
 /* 键盘样式开始 */
 /* 键盘 */
 .down-blue {
   background-color: #108EE9!important;
   color: #ffffff!important;
 .fl {
   float: left;
 .am-input-content {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: #333333;
   padding-left: 0;
   font-size: 34rpx;
 .carnum {
   display: flex;
   width: 490rpx;
   height: 70rpx;
   background-repeat: repeat-x;
   background-size: auto 100%;
 .carnum text {
   display: inline-block;
   width: 50rpx;
   margin-left: 20rpx;
   line-height: 70rpx;
   text-align: center;
   height: 70rpx;
   background-color: #f5f5f5;
 .carnum text.carnum-blue {
   background-color: #E3F3FF;
 .keyboard {
   position: fixed;
   width: 100%;
   height: 100%;
   bottom: 0;
   z-index: 99;
 .keyboard-mini {
   position: fixed;
   bottom: 0;
   z-index: 100;
   background-color: #D8D8D8;
 .tel {
   border-bottom: 2rpx solid #ddd;
   height: 100rpx;
   line-height: 100rpx;
 .chepai {
   height: 200rpx;
   line-height: 200rpx;
 .provinces {
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
   padding-top: 10rpx;
 .pro-li {
   font-size: 32rpx;
   color: #353535;
   height: 76rpx;
   width: 62rpx;
   line-height: 76rpx;
   text-align: center;
   margin: 0 6rpx;
   margin-bottom: 20rpx;
   background-color: #fff;
   box-shadow: 0 1rpx 2rpx 0 #CCD2E3;
   border-radius: 5rpx;
   -webkit-box-flex: 1;
   flex: 1 1 8%;
 .keyNums .pro-li:nth-child(30) {
   opacity: 0;
   width: 10rpx;
 .keyNums .pro-li:nth-child(21) {
   margin-left: 37rpx;
 .pro-close {
   width: 100rpx;
   height: 70rpx;
   line-height: 70rpx;
   font-size: 32rpx;
   text-align: center;
   background-color: #fff;
   border: 2rpx solid #ddd;




    

   margin: 5rpx;
 .pro-del {
   width: 100rpx;
   height: 70rpx;
   line-height: 70rpx;
   font-size: 32rpx;
   text-align: center;
   background-color: #fff;
   border: 2rpx solid #ddd;
   margin: 5rpx;
 .keyNums {
   overflow: hidden;
   padding-left: 4rpx;
   padding-top: 10rpx;
 .pro-ok {
   width: 100rpx;
   height: 70rpx;
   line-height: 70rpx;
   font-size: 32rpx;
   text-align: center;
   background-color: #fff;
   border: 2rpx solid #ddd;
   margin: 5rpx;
 .pro-d {
   width: 100rpx;
   height: 70rpx;
   line-height: 70rpx;
   font-size: 32rpx;
   text-align: center;
   background-color: #fff;
   border: 2rpx solid #ddd;
   margin: 5rpx;
 .keyNums .bot .kb-del {
   margin-left: 12rpx
 .keyNums .bot .kb-icon {
   width: 102rpx;
   height: 76rpx;
   background: #ccc
 .news-swiper-box {
   height: 72rpx;
 /* 键盘样式结束 */

JS文件(键盘模块不需要用到.json配置) keyboard.js.

Page({
  data: {
    notNum: true,
    vehicleColor: '1',
    strDisabled: false,
    checked: false,
    // 键盘
    provinceArr: ["粤", "京", "津", "渝", "沪", "冀", "晋", "辽", "吉", "黑", "苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "琼", "川", "贵", "云", "陕", "甘", "青", "蒙", "桂", "宁", "新", "藏", "使", "领", "警", "学", "港", "澳"],
    strArr: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "", "Z", "X", "C", "V", "B", "N", "M"],
    hiddenPro: true,// 隐藏省份键盘
    hiddenStr: true,// 隐藏数字字母键盘
    carnum: '', //车牌号码
    downBtn: '返回',
  onLoad: function(options) {
    let _this = this;
    _this.setData({
      items: [
        { name: 'yellow', value: '黄色', checked: !this.data.checked, key: "1" },
        { name: 'blue', value: '蓝色', checked: this.data.checked, key: "0" }
  onPageScroll: function(e) {
    this.stopPropagation()//滑动页面隐藏键盘
  stopPropagation() {//隐藏键盘方法
    this.setData({
      hiddenPro: true,
      hiddenStr: true,
  radioChange: function(e) {//切换车牌颜色
    let vehicleColorValue = e.detail.value;
    this.setData({
      checked: !this.data.checked,
      vehicleColor: vehicleColorValue
    this.setData({
      items: [
        { name: 'yellow', value: '黄色', checked: !this.data.checked, key: "1" },
        { name: 'blue', value: '蓝色', checked: this.data.checked, key: "0" }
  // 键盘函数开始
  proTap(e) {//点击省份
    let that = this;
    let province = e.currentTarget.dataset.province;
    let carnum = this.data.carnum;
    if (carnum.length < 1) {//避免连续点击
      carnum += province;
    this.setData({
      carnum: carnum,
      hiddenPro: true,
      hiddenStr: false,
  strTap(e) {//点击字母数字
    let that = this;
    this.setData({
      waiting: true
    let province = e.currentTarget.dataset.str;
    let carnum = this.data.carnum;
    if (carnum.length < 7) {//避免连续点击
      carnum += province;
    this.setData({
      notNum: false,
      carnum: carnum,
    this.setData({
      notNum: false,
      carnum: carnum,
    setTimeout(() => {
      that.setData({
        waiting: false
    }, 100);
    if (carnum.length > 6) {
      this.setData({
        downBtn: '完成',
        strDisabled: true,
      this.searchCardInfo()
      return;// 车牌长度最多为7个
  backSpace() {//退格
    this.setData({
      downBtn: '返回',
      strDisabled: false,
    let carnum = this.data.carnum;
    var arr = carnum.split('');
    arr.splice(-1, 1)
    console.log(arr)
    var str = arr.join('')
    if (arr.length < 2) {
      this.setData({
        notNum: true
    if (str == '') {
      this.setData({
        hiddenPro: false,
        hiddenStr: true
    this.setData({
      carnum: str
  backKeyboard() {//返回省份键盘
    if (this.data.carnum.length > 6) {
      this.setData({
        downBtn: '完成',
        hiddenPro: true,
        hiddenStr: false
    } else if (this.data.carnum.length > 0) {
      this.setData({
        hiddenPro: true,
        hiddenStr: false
    } else {
      this.setData({
        hiddenPro: false,
        hiddenStr: true
  applyNum() {
    this.setData({
      hiddenPro: true,
      hiddenStr: true,
  // 键盘函数结束
});

一个简单的车牌号自定义键盘就好了

可以根据自身需求做一定优化,有好的优化建议欢迎指教!

支付宝小程序自定义键盘-车牌号键盘小程序原生写法手写自定义键盘,订制车牌号输入键盘新的改变合理的创建标题,有助于目录的生成插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入小程序原... <view class="page_box" catchtap="hindKeyboard"> <view class="input_view" catchtap="hindKeyboard"> <text class="title">消费金额:</text> <view class="input_box" catchtap="showKeyboard"> <text class="i
小程序开发过程中可能会碰到和车牌信息相关的开发,这时候就需要输入车牌号,传统的键盘输入车牌号,需要打出汉字,再选择相应的字母数字,并不是特别方便,这里笔者专门开发了车牌键盘,可以任意选择修改省份,数字和字母。 先看示例图: 组件主要代码如下: // components/plate-number-keyboard/plate-number-keyboard.js Component({ 公司要做一个停车场微信小程序,支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能,为了提升用户体验,避免繁琐的输入,决定自己写一个键盘。 效果图如下 省份简写键盘如下: (此图片来源于网络,如有侵权,请联系删除! ) 省份简写键盘 英文简写键盘如下: (此图片来源于网络,如有侵权,请联系删除! ) 英文简写键盘 (此图片来源于网络,如有侵权,请联系删除! ) wxml文件内容 <view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-colo
微信小程序——自定义键盘:自定义组件和父组件通过事件进行属性同步 自定义组件触发事件时,需要在自定义组件中使用 triggerEvent 方法,指定事件名、detail对象和事件选项: 在对组件进行封装时 在当前页面想要获取组件中的某一状态,需要使用到this.triggerEvent(’ ',{},{}),第一个参数是自定义事件名称,这个名称是在页面调用组件时bind的名称,第二个对象就可以将...
uni-app是一种跨平台的开发框案,它可以让你使用一份代码开发出能在多个平台(包括微信小程序支付小程序、H5、App等)运行的应用。 如果你想在uni-app小程序中使用车牌键盘,你可以使用uni-app内置的组件`<keyboard/>`。这个组件可以让你自定义键盘的布局和样式,并且可以绑定输入事件,在用户按下键盘上的按键时触发事件。 例如,你可以在uni-app小程序的vue文件中使用如下代码定义车牌键盘: <template> <input v-model="plateNumber" /> <keyboard @confirm="confirm" @cancel="cancel" :maxlength="7" :keyboardType="keyboardType" /> </view> </template> <script> export default { data() { return { plateNumber: '', keyboardType: 'carNumber' methods: { confirm(e) { this.plateNumber = e.value; cancel(e) { console.log('用户点击了取消按钮'); </script> 在这个例子中,我们使用了`<keyboard/>`组件的`keyboardType`属性来指定键盘的类型为"carNumber",这样就会使用车牌键盘。在用户点击键盘上的确认按钮时,会触发`confirm`事件,在用户点击键盘上的取消按钮时,会触发`cancel`事件。 有关`<keyboard/>`