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

效果：

---

思路：

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

VUE 版本 demo

keyBoard.vue 封装键盘

组件引用

---

jQuery版本

初始化

 for (let i = 0; i < 8; i++) {
                $('
')
                    .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 = '
';
	  addHtml += '' + provinces[provinceIds] + '';
	  addHtml += '
';
	  return addHtml;
	}
  $('#carKeyboard').html('');
  let ss = '';
  for (let i = 0; i < provinces.length; i++) {
    ss = ss + addKeyProvince(i);
  }
  $('#carKeyboard').html('
' + ss + '
关闭
清空
');
}

function showKeybord() {
  // 车牌号非省份选择器
  $('#carKeyboard').html('');
  let sss = '';
  for (let i = 0; i < keyNums.length; i++) {
    if (i != 29 && i != 37) {
      sss = sss + '
' + keyNums[i] + '
';
    }
  }
  sss = sss + ' 
确认
 
';
  $('#carKeyboard').html('
' + sss + '
');
}

键盘点击事件

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('车牌输入不正确!');
}

芜湖 起飞~