WEB-新能源车牌输入键盘 ( jQuery版 & VUE 版)

效果：

---

思路：

1.初始化页面渲染车牌号显示框,点击框框时弹起键盘;
2.第一个框框为省份输入键盘,选择省份后动态添加一个类名class haspro,其他框框点击在有haspro时弹起数字键盘,否则始终弹起省份键盘;
3,功能性的 确定 后退 清除 以及 关闭按钮;
4.特殊验证 车牌第二位必须为字母,车牌号正则验证等;
5.有效点击时给对应的框框添加类名 active,通过这个class,结合强大的jquery过滤器选择器,可以实现诸如光标闪动效果,后退清空等等功能性方法;
6.layer 交互提示

VUE 版本 demo

keyBoard.vue 封装键盘

<template>
  <transition name="el-zoom-in-bottom" appear>
    <div
      class="absolute bottom-0 p-6 pt-0 keyboard-dialog"
      v-show="show"
      @click.stop="
        'javascript:void()';


      "
    >
      <ul
        class="flex flex-row flex-wrap justify-between p-0 mb-0 text-black list-none"
      >
        <li
          v-for="(item, index) in activeList"
          :key="index"
          :class="[
            'mt-3 leading-10 text-center bg-white cursor-pointer h-11',
            index >= 31 ? 'fix-margin' : '',
            activeIndex == 1 && index < 10
              ? 'opacity-50 cursor-not-allowed'
              : ''
          ]"
          :style="{ width: '9.1%' }"
          @click="
            activeIndex == 1 && index < 10
              ? 'javascript:void(0)'
              : handleInput(item)
          "
        >
          {{ item }}
        </li>
        <li
          class="mt-3 leading-10 text-center cursor-pointer h-11 del "
          style="width:19.2%;"
          @click="handleDel"
        ></li>

        <li
          class="mt-3 leading-10 text-center text-white cursor-pointer h-11 bg-blue-dark"
          style="width:19.2%;margin-left:1%;"
          @click="handleConfirm"
        >
          完成
        </li>
      </ul>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Keyboard",
  props: {
    activeIndex: {
      type: Number,
      default: -1
    }
  },
  data: () => ({
    show: false,
    province: new Array(
      "京",
      "沪",
      "浙",
      "苏",
      "粤",
      "鲁",
      "晋",
      "冀",
      "豫",
      "川",
      "渝",
      "辽",
      "吉",
      "黑",
      "皖",
      "鄂",
      "津",
      "贵",
      "云",
      "桂",
      "琼",
      "青",
      "新",
      "藏",
      "蒙",
      "宁",
      "甘",
      "陕",
      "闽",
      "赣",
      "湘"
    ),
    keyNums: new Array(
      "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"
    )
  }),
  computed: {
    activeList() {
      return !this.activeIndex ? this.province : this.keyNums;
    }
  },
  methods: {
    showKeyboard() {
      this.show = true;
    },
    hideKeyboard() {
      this.show = false;
    },
    handleConfirm() {
      // 确认
      this.$emit("onComplete");
    },
    handleDel() {
      // 回退
      this.$emit("onDelete", "");
    },
    handleInput(str) {
      this.$emit("onInput", str);
    }
  }
};
</script>

<style lang="scss" scoped>
.keyboard-dialog {
  width: calc(80px * 9 + 12px * 8 + 30px);
  background: #ced3d9;
}

.del {
  background-color: #9ca3af;
  background-image: url("~@/views/bigData/assets/images/del.png");
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-position: center;
  margin-left: auto;
}

.fix-margin {
  margin-left: 1%;
}
</style>

组件引用

<template>
  <div
    class="flex flex-col items-center h-full justify-evenly entry"
    @click="hide"
  >
    <ul class="flex p-0 list-none">
      <li
        v-for="(item, index) in plate"
        :key="index"
        :class="[
          'flex items-center justify-center w-20 h-24 ml-3 text-5xl border rounded    first:ml-0',
          index != 2 ? 'border-solid  cursor-pointer ' : '',
          index == active
            ? 'active'
            : index == 8
            ? 'border-green-400 text-green-400'
            : 'border-blue-light',
          index == 8 ? 'new-energy relative' : ''
        ]"
        @click.stop="show(index)"
      >
        {{ item }}
      </li>
    </ul>

    <button
      class="h-16 p-0 text-2xl tracking-widest text-white border-none rounded-lg cursor-pointer btn bg-gradient-to-b from-blue-dark to-teal-light hover:opacity-80"
      @click="handleClick"
    >
      查询
    </button>

    <Keyboard
      ref="keyboard"
      :activeIndex="active"
      @onInput="handleInput"
      @onDelete="handleDelete"
      @onComplete="handleComplete"
    />
  </div>
</template>

<script>
import { validateCarNum } from "@/utils/validate";
import Keyboard from "@/views/bigData/components/keyBoard.vue";
export default {
  name: "Entry",
  data: () => ({
    plate: ["", "", "·", "", "", "", "", "", ""],
    active: -1
  }),
  components: {
    Keyboard
  },
  methods: {
    show(index) {
      // 展示键盘输入
      if (index == 2) return;
      this.active = index;
      this.$refs.keyboard.showKeyboard();
    },
    hide() {
      this.active = -1;
      this.$refs.keyboard.hideKeyboard();
    },
    handleInput(val) {
      // 接受输入值
      this.plate.splice(this.active, 1, val);
      if (this.active == 8) return;
      this.active++;
      if (this.active == 2) this.active = 3;
    },
    handleDelete() {
      this.plate.splice(this.active, 1, "");
      if (!this.active) return;
      this.active--;
      if (this.active == 2) this.active = 1;
    },
    handleComplete() {
      // 完成
      this.hide();
    },

    handleClick() {
      // 查询

      const licenseNumber = this.plate.join("").replace("·", "");

      if (!licenseNumber.length)
        return this.$store.commit("custom/TOOGLE_ERROR_POP", "请输入车牌号!");
      if (!validateCarNum(licenseNumber))
        return this.$store.commit(
          "custom/TOOGLE_ERROR_POP",
          "请输入正确的车牌号!"
        );
      this.$router.push({
        path: "/dispenser/detail",
        query: {
          licenseNumber
        }
      });
    }
  }
};
</script>

<style lang="scss">
.entry {
  font-family: fangsong;
}
.btn {
  width: 550px;
}

.new-energy {
  &:after {
    position: absolute;
    content: "新能源";
    color: #10b981;
    font-size: 16px;
    font-family: "Courier New", Courier, monospace;
    top: -25px;
  }
}

.active {
  animation: breath 0.5s ease infinite;
}

@keyframes breath {
  from {
    border-color: #00a0e9;
  }

  to {
    border-color: #ffffff;
  }
}
</style>

---

jQuery版本

初始化

 for (let i = 0; i < 8; i++) {
                $('<div></div>')
                    .attr({
                        class: 'item ' + (i == 0 ? ' input_pro' : ' input_pp'),
                        index: i
                    })
                    // .html(i)
                    .appendTo($carKey);
            }

绑定车牌框 点击事件

$(".root-main-carNum .item").on('click', function () {
                // 点击显示键盘
                $(this).siblings().removeClass('active')
                $(this).addClass('active')
                $('#carKeyboard').show();
                if ($(this).hasClass('input_pp')) {
                    // 点击的不是第一个框框  判断第一个框框有没有省份
                    if ($(".input_pro").hasClass("hasPro")) { 
                    	// 如果已选择省份
                        showKeybord()
                    } else {
                        $(".input_pro").click()
                    }
                } else {
                    //弹起省份键盘
                    showProvince()
                }
            })

键盘初始化方法

let provinces = new Array(
  '京', '沪', '浙', '苏', '粤', '鲁', '晋', '冀',
  '豫', '川', '渝', '辽', '吉', '黑', '皖', '鄂',
  '津', '贵', '云', '桂', '琼', '青', '新', '藏',
  '蒙', '宁', '甘', '陕', '闽', '赣', '湘'
);

let keyNums = new Array(
  '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', '删除'
);
function showProvince() {
  // 车牌号省份选择器
	function addKeyProvince(provinceIds) {
	  // 车牌号省份选择器html生成
	  let addHtml = '<li>';
	  addHtml += '<span onclick="chooseProvince(this);">' + provinces[provinceIds] + '</span>';
	  addHtml += '</li>';
	  return addHtml;
	}
  $('#carKeyboard').html('');
  let ss = '';
  for (let i = 0; i < provinces.length; i++) {
    ss = ss + addKeyProvince(i);
  }
  $('#carKeyboard').html('<ul class=\'clearfix ul_pro\'>' + ss + '<li class=\'li_close\' onclick=\'closePro();\'><span>关闭</span></li><li class=\'li_clean\' onclick=\'cleanPro();\'><span>清空</span></li></ul>');
}

function showKeybord() {
  // 车牌号非省份选择器
  $('#carKeyboard').html('');
  let sss = '';
  for (let i = 0; i < keyNums.length; i++) {
    if (i != 29 && i != 37) {
      sss = sss + '<li class="ikey ikey' + i + ' ' + (i > 9 ? 'li_zm' : 'li_num') + ' ' + (i > 28 ? 'li_w' : '') + '"><span onclick="choosekey(this,' + i + ');">' + keyNums[i] + '</span></li>';
    }
  }
  sss = sss + ' <li class="ikey li-icon-close"><span  onclick="choosekey(this,' + '999' + ')">确认</span></li><li class="ikey li-icon-delete"><span onclick="choosekey(this,' + '888' + ')">&nbsp;</span></li>';
  $('#carKeyboard').html('<ul class=\'clearfix ul_keybord\'>' + sss + '</ul>');
}

键盘点击事件

function chooseProvince(obj) {
  // 省份键盘选择
  $('.input_pro').html($(obj).text());
  $('.input_pro').addClass('hasPro');
  $('.active')
    .removeClass('active')
    .next().addClass('active');
    //省份键盘选择后继续向下弹起数字键盘
  showKeybord();
}

function choosekey(obj, jj) {
  // 非省份数字键盘选择Ï
  if ($('.active').attr('index') == 1 && jj < 10) {
    // 输入框第二位 必须为字母
    layer.tips('车牌第二位为字母!', '.active', {
      tips: [1, '#3595CC'],
      time: 4000
    });
    return;
  }
  if (jj == 888) {
    // 后退按钮
    if ($('.active').prev().hasClass('hasPro')) {
      // 后退到了省区
      $('.hasPro').removeClass('hasPro');
      $('.active')
        .html('')
        .removeClass('active')
        .prev().addClass('active');
      showProvince();
      return;
    }
    if (!$('.active').next().length) {
      // 车牌号最后一位
      $('.active')
        .html('')
        .removeClass('active')
        .prev().addClass('active');
      return;
    }
    $('.active')
      .html('')
      .removeClass('active')
      .prev().addClass('active');
  } else if (jj == 999) {
    // 确定按钮
    $('.root-main-carNum').find('.active').removeClass('active');
    $('#carKeyboard').hide();
  } else {
    $('.active').html($(obj).text());
    if (!$('.active').next().length) return;
    $('.active')
      .removeClass('active')
      .next().addClass('active');
  }
}

其他功能

function closePro() {
  // 关闭按钮
  $('.root-main-carNum').find('.active').removeClass('active');
  $('#carKeyboard').hide();
}

function cleanPro() {
  // 清空按钮
  $.each($('.root-main-carNum .item'), (idx, ele) => {
    if (!idx) $(ele).removeClass('hasPro');
    $(ele).html('');
  });
}


function getCarNum() {
  // 验证车牌 返回车牌
  const carNumStr = $('.root-main-carNum .item').text();
  let reg =
    /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][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挂学警港澳使领]))$/;
  if (reg.test(carNumStr)) return carNumStr;
  else layer.msg('车牌输入不正确!');
}

芜湖 起飞~