JQ實現一個個輸入車牌號的效果，並且支持新能源車牌號和特殊車牌。

本文轉載自查看原文 2021-11-22 16:17 3973

效果圖：

css：

html：

JQ：

注意，需要自己引入jq文件，要不會報錯。

全部代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jQuery v3.1.1.js" ></script>
</head>
<body>
<style>
.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;}
</style>

<div class="carcodeBox">
<div class="carLicenseMain">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</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>
<script>

//點擊頁面的其他地方，關閉小鍵盤
$(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");
}
}
</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js驗證車牌號包含新能源車牌正則驗證車牌號碼，包括新能源車牌車牌號正則表達式(新能源車牌) python的車牌號的檢測 h5車牌號輸入鍵盤基於TensorFlow的車牌號識別系統隨機生成臨時車牌號 android仿支付寶輸入車牌號 python opencv識別藍牌車牌號之取出車牌號 (1/3) JS車牌號碼