车牌录入控件JS+CSS+JQuery

HTML

<div class="carcodeBox">
<div class="carLicenseMain">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--<input type="text" id="carinput"/>-->
</div>

<div class="keyboardBox">
<div class="provienceBox" id="textJtBoxs">
<ul>
<li>京</li>
<li>津</li>
<li>渝</li>
<li>沪</li>
<li>冀</li>
<li>晋</li>
<li>辽</li>
<li>吉</li>
<li>黑</li>
<li>苏</li>
<li>浙</li>
<li>皖</li>
<li>闽</li>
<li>赣</li>
<li>鲁</li>
<li>豫</li>
<li>鄂</li>
<li>湘</li>
<li>粤</li>
<li>琼</li>
<li>川</li>
<li>贵</li>
<li>云</li>
<li>陕</li>
<li>甘</li>
<li>青</li>
<li>蒙</li>
<li>桂</li>
<li>宁</li>
<li>新</li>
<li>藏</li>
<li>使</li>
<li>领</li>
<li>警</li>
<li>学</li>
<li>港</li>
<li>澳</li>
<li class="changeContentBtn" datas="en">ABC</li>
<li class="deleteBtn" datas="delete">删除</li>
</ul>
</div>

<div class="provienceBox" id="textEnBox">
<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>
<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>
<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>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li class="changeContentBtn" datas="jt">中</li>
<li class="deleteBtn other" datas="delete">删除</li>
</ul>
</div>
</div>
<button onclick="submms()" style="margin-top: 250px;padding: 5px 30px;">提交</button>
</div>

JQuery

//点击页面的其他地方，关闭小键盘
$(document).on("click","body",function(){
$("#textEnBox,#textJtBoxs").hide();
});


//提交按钮，获取车牌号码
function submms(){
var carNum="";
$(".carLicenseMain ul li").each(function(index){
var cartext=$(this).text();
console.log(index)
if(cartext=="" && index<7){
cartext=" ";
}else{

}
carNum+=cartext;
})
$("#carinput").val(carNum);
if(carNum.indexOf(" ")!=-1){
alert("请填写完整车牌号");
}else{

}
}



//点击小键盘时
$(document).on("click",".provienceBox ul li",function(event){
event.stopPropagation();
var dataqh=$(this).attr("datas");
//如果点击的是”ABC“，显示英文键盘
if(dataqh=="en"){
var indexs=$(".carLicenseMain ul li.active").index();
//如果是输入第一位，不能切换键盘
if(indexs==0){
alert("车牌号第一位只能是简称");
}else{
$("#textEnBox").show();
$("#textJtBoxs").hide();
}
//如果点击的是”中“，显示省份键盘
}else if(dataqh=="jt"){
$("#textEnBox").hide();
$("#textJtBoxs").show();

//如果是”删除“，就删除
}else if(dataqh=="delete"){
var ontext=$(".carLicenseMain ul li.active").text();

if(ontext){
$(".carLicenseMain ul li.active").text("");
}else{
var indexs=$(".carLicenseMain ul li.active").index();
if(indexs==0){
$(".carLicenseMain ul li.active").text("");
}else{
$(".carLicenseMain ul li").removeClass("active");
$(".carLicenseMain ul li").eq(indexs-1).addClass("active");
$(".carLicenseMain ul li.active").text("");
}

}

}else{
var textname=$(this).text();
keyboard(textname)
}
});


//点击车牌输入框时
$(document).on("click",".carLicenseMain ul li",function(event){
event.stopPropagation();
$(this).siblings("li").removeClass("active");
$(this).addClass("active");
var indexs=$(".carLicenseMain ul li.active").index();
if(indexs==0){
$("#textEnBox").hide();
$("#textJtBoxs").show()
}else{
$("#textEnBox").show();
$("#textJtBoxs").hide();
}
});


//把
function keyboard(textname){
$(".carLicenseMain ul li.active").text(textname);
var indexs=$(".carLicenseMain ul li.active").index();
if(indexs==0 || indexs==7){
$("#textEnBox").show();
$("#textJtBoxs").hide();
}else{

}
if(indexs>=7 || indexs<=-1){
// $(".carLicenseMain ul li").removeClass("active");
$("#textEnBox").hide();
$("#textJtBoxs").hide();
}else{
$(".carLicenseMain ul li").removeClass("active");
$(".carLicenseMain ul li").eq(indexs+1).addClass("active");
}
}

CSS

.carcodeBox{width: 100%;max-width: 1200px;margin: 0 auto;position: relative;}
.carcodeBox ul{overflow: auto;padding: 0;margin: 0;}
.carcodeBox ul li{list-style: none;}

.carLicenseMain ul{display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;} 
.carLicenseMain ul li{width: 38px;height: 38px;box-sizing: border-box;border: 1px solid #ccc;display: inline-block;line-height: 36px;
font-size: 18px;color: #000;text-align: center;margin-left: 5px;cursor: pointer;}
.carLicenseMain ul li:nth-last-child(1){border: 2px dashed #00b520;}
.carLicenseMain ul li.active{border: 1px solid #f3483e;color: #f3483e;}

.keyboardBox{position: absolute;z-index: 10;width: 493px;top: 45px;left: 0;}
.provienceBox{background: #D0D5D9;padding: 5px 5px;padding-top: 3px;border-radius: 5px;box-shadow: 5px 5px 10px #9e9e9e;}
.provienceBox ul li{display: inline-block;width: 38px;height: 38px;line-height: 38px;background: #fff;margin: 5px 3px;text-align: center;
cursor: pointer;font-size: 14px;border-radius: 5px;box-shadow: 2px 2px 3px #979797;}
.provienceBox ul li.deleteBtn{width: 90px;background: #c20000;float: right;color: #fff;}
.provienceBox ul li:hover{box-shadow: 0px 0px 3px #f3483e;color: #f3483e;}
#textEnBox,#textJtBoxs{display: none;}

转自： https://www.cnblogs.com/linhaisheng/p/15589031.html

验证车牌正则表达式：

$('#F_LicensePlate').on("blur", function () {
                var lp = $('#F_LicensePlate').val();
                var reg = new RegExp('^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$');
                var ret = reg.test(lp);
                if (!ret)
                    pc.alert.error("请输入正确的车牌");
            });