DIV
<!--键盘输入框-->
<div class="weui-cell weui-cell_active" id="js_cell"> <div class="weui-cell__hd"><label class="weui-label">车牌号码</label></div> <div class="weui-cell__bd weui-flex" id="key"> <input id="car_no" class="weui-input" type="text" style="display: none"/> <div class="carLicenseMain"> <ul id="all"> <li class="active" id="c1"></li> <li id=“c2”></li> <li id=“c3”></li> <li id=“c4”></li> <li id=“c5”></li> <li id=“c6”></li> <li id=“c7”></li> <li class="xinnengyuan" id=“c8”></li> </ul> </div> </div> </div>
<!--键盘-->
<div id="keyboardBox"> <div class="provienceBox" id="provienceBox"> <div class="shutprovince" id="shut"><img src="../image//xiala.png" class="xiala"/></div> <ul> <li>京</li> <li>津</li> <li>渝</li> <li>沪</li> <li>冀</li> <li>晋</li> <li>辽</li> <li>吉</li> <li>黑</li> <li>苏</li> </ul> <ul> <li>浙</li> <li>皖</li> <li>闽</li> <li>赣</li> <li>鲁</li> <li>豫</li> <li>鄂</li> <li>湘</li> <li>粤</li> <li>琼</li> </ul> <ul> <li>川</li> <li>贵</li> <li>云</li> <li>陕</li> <li>甘</li> <li>青</li> <li>蒙</li> <li>桂</li> <li>宁</li> <li>新</li> </ul> <ul> <li class="changeContentBtn other">ABC</li> <li>藏</li> <li>使</li> <li>领</li> <li>警</li> <li>学</li> <li>港</li> <li>澳</li> <li class="deleteBtn other">删除</li> </ul> </div> <div class="textBox" id="textBox"> <div class="shutprovince" id="shuta"><img src="../image//xiala.png" class="xiala"/></div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> </ul> <ul> <li>Q</li> <li>W</li> <li>E</li> <li>R</li> <li>T</li> <li>Y</li> <li>U</li> <li>I</li> <li>O</li> <li>P</li> </ul> <ul> <li>A</li> <li>S</li> <li>D</li> <li>F</li> <li>G</li> <li>H</li> <li>J</li> <li>K</li> <li>L</li> </ul> <ul> <li class="changeContentBtn other">省份</li> <li>Z</li> <li>X</li> <li>C</li> <li>V</li> <li>B</li> <li>N</li> <li>M</li> <li class="deleteBtn other">删除</li> </ul> </div> </div>
CSS
.shutprovince{ margin-bottom: 5px; height: 2.2rem; line-height: 1.9rem; text-align: right; padding: 0 0.6rem; font-size: 0.85rem; background-color: #f9f9f9; color: #333; border-bottom: 0.03rem solid #ddd; border-top: 0.01rem solid #eee; } .carLicenseMain{ 100%; /* height: 160px; */ display: flex; flex-direction: column; align-items: center; justify-content: center; } .carLicenseMain ul{ 100%; height: 36px; /* display: flex; */ flex-direction: row; align-items: center; justify-content: center; } .carLicenseMain ul li{ 22px; height: 40px; border: 1px solid #cccccc63; text-align: center; line-height: 40px; float: left; } .carLicenseMain ul li:last-of-type{ margin: 0; } .carLicenseMain ul li.active{ border: 2px solid #06ae5661; } .carLicenseMain ul li.xinnengyuan{ background: url(../image/jia.png) no-repeat center; background-size: 65% 50%; border: 2px dashed #CCCCCC; } .xiala{ 7.5%; margin-top:7px; }
JS
$(document).ready(function() {
var num1="";
var isclick= true;
//键盘隐藏，点击触发显示
$("#keyboardBox").hide()
$(".carLicenseMain").on("click",function(){
$("#keyboardBox").show()
})
//关闭事件-省份
$("#shut").on("click",function(){
$("#keyboardBox").hide()
})
//关闭事件-数字
$("#shuta").on("click",function(){
$("#keyboardBox").hide()
})
//键盘点击动画
$(".textBox ul li").each(function(){
$(this).click(function(){
$(this).addClass("activeKey")//添加动画效果
$(this).siblings().removeClass("activeKey")//移除动画效果
var interval=setTimeout(function(){//定时器及时清除自身动画效果
$(this).removeClass("activeKey")
window.clearInterval(interval)
}.bind(this),200);
})
})
var num = 6;//需要输入的车牌数
//切换键盘
$('.changeContentBtn').click(function(){
$('li').siblings().removeClass("activeKey")
if($(this).html()=='ABC'){
$('#textBox').show();
$('#provienceBox').hide();
}else{
$('#textBox').hide();
$('#provienceBox').show();
}
})
//新能源点击事件
$('.xinnengyuan').click(function(){
num = 7;
var index = getIndex();
//alert(index);
//console.log(isclick);
//console.log( $('.carLicenseMain ul li.active').html($(self).html()).addClass('active'));
// console.log(index+""+num);
num1 = $("#car_no").val();
if(isclick)
{
isclick= false;
if(num1.length == 7)
{
//console.log("这里d");
//$('.carLicenseMain ul li.active').html($(self).html()).addClass('active');
//判断第八位数值是否为空，如果为空，点击后绿色框不移到下一个框内
$('.carLicenseMain ul li.active').html($(self).html()).removeClass('active').next().addClass('active');
}
// setTimeout(function(){
// isclick = true;
// }, 60000);
}
//console.log(num1);
//输入车牌号不满足七位数,无法输入最后一位
//防止重复点击，选中后禁止点击
$(this).removeClass('xinnengyuan');
})
//获取当前车牌数字索引
function getIndex(){
var index = 0;
$('.carLicenseMain ul li').each(function(){
var reg = new RegExp('active');
if(reg.test($(this).attr('class'))){
//console.log(reg.test($(this).attr('class')));
index = $(this).index();
}
})
return index;
}
//自定义键盘处理函数
function keyboard(num,self){
var index = getIndex();
//判断输入第一位为汉字
//alert(index);
if(index == 0)
{
var str = self.innerText;
//alert(str);
var str1 = /^[u4e00-u9fa5]*$/.test(str);
if(str1 == false)
{
$("#error_tip").show();
$("#error_tip").html("请输入省份");
return false;
}
else
{
//alert(str);
// document.getElementById('c1').innerText =str;
$("#error_tip").hide();
}
}
if(index == 1)
{
var str = self.innerText;
//alert(str);
var str1 = /^[a-zA-Z]*$/.test(str);
if(str1 == false)
{
$("#error_tip").show();
$("#error_tip").html("请输入合法的英文标识");
return false;
}
else
{
$("#error_tip").hide();
}
}
console.log(index);
if(index > 1)
{
var str = self.innerText;
//alert(str);
var str1 = /^[u4e00-u9fa5]*$/.test(str);
if(str1)
{
$("#error_tip").show();
$("#error_tip").html("请输入合法号码");
return false;
}
else
{
$("#error_tip").hide();
}
}
var stra = self;
//alert( $("#c1").innerText);
a(index,stra);
//console.log($("#c1").innerText+$("#c2").innerText)
if(index<=num){
if(index == num){
//console.log($('.carLicenseMain ul li.active').html($(self).html()));
$('.carLicenseMain ul li.active').html($(self).html());
}else{
// console.log($(self).html());
//console.log($('.carLicenseMain ul li.active').html($(self).html()));
$('.carLicenseMain ul li.active').html($(self).html()).removeClass('active').next().addClass('active');
}
$('#textBox').show();
$('#provienceBox').hide();
}
}
//为车牌号码赋值
function a(index,self){
switch(index){
case 0:
$("#car_no").val(self.innerText);
break;
case 1:
var n1 = $("#car_no").val();
var n2 = n1 + self.innerText;
$("#car_no").val(n2);
break;
case 2:
//num3 = num2+self.innerText;
var n1 = $("#car_no").val();
var n2 = n1 + self.innerText;
$("#car_no").val(n2);
break;
case 3:
var n1 = $("#car_no").val();
var n2 = n1 + self.innerText;
$("#car_no").val(n2);
break;
case 4:
var n1 = $("#car_no").val();
var n2 = n1 + self.innerText;
$("#car_no").val(n2);
break;
case 5:
var n1 = $("#car_no").val();
var n2 = n1 + self.innerText;
$("#car_no").val(n2);
break;
case 6:
//当index ==6时，取最后一次的值赋值
var n1 = $("#car_no").val();
if(n1.length ==7)
{
n1 = n1.substring(0, n1.length - 1);
}
var n2 = n1 + self.innerText;
$("#car_no").val(n2);
//$("#c7").innerHTML=self.innerText;
break;
case 7:
var n1 = $("#car_no").val();
var n2 = n1 + self.innerText;
$("#car_no").val(n2);
//$("#c8").innerHTML=self.innerText;
break;
}
// $("#car_no").val(num3);
//console.log($("#car_no").val(num3));
// $("#car_no").val(car);
//return c1+c2;
}
//省份键盘点击事件
$('#provienceBox ul li:not(.other)').click(function(){
$(this).addClass("activeKey")//添加动画效果
$(this).siblings().removeClass("activeKey")//移除动画效果
var interval=setTimeout(function(){//定时器及时清除自身动画效果
$(this).removeClass("activeKey")
var self = this;
keyboard(num,self);
window.clearInterval(interval)
}.bind(this),200);
//省份点击后键盘切换
//var self = this;
//keyboard(num,self);
})
//文本键盘点击事件
$('#textBox ul li:not(.other)').click(function(){
var self = this;
keyboard(num,self);
})
//回退按钮点击事件
$('.deleteBtn').click(function(){
var index = getIndex();
//isclick = true;
if(index == num){
if($('.carLicenseMain ul li.active').html() != ''){
$('.carLicenseMain ul li.active').html('');
//$('.carLicenseMain ul li:last-of-type').addClass('xinnengyuan');
}else{
if(index == 7){
$('.carLicenseMain ul li:last-of-type').addClass('xinnengyuan');
num = 6;
}
$('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('');
isclick = true;
}
}else if(index < num && index > 1){
$('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('');
}else if(index == 1){
$('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('省');
}
//每点击一次，car_no的长度减一
var carno = $("#car_no").val();
if(carno.length >0)
{
var delcarno = carno.substring(0, carno.length - 1);
$("#car_no").val(delcarno);
if(delcarno ==0)
{
$('#textBox').hide();
$('#provienceBox').show();
}
}
})
//提交按钮点击事件
$('#submitBtn').click(function(){
var carNum=""
$(".carLicenseMain ul li").each(function(index){
carNum+=$(this).html()
})
alert(carNum)
})
})