jQuery车牌号选择（包含新能源）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery车牌号选择（包含新能源）</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="cleartype" content="on" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.carcodeBox {
display: none;
flex-direction: column;
position: fixed;
bottom: 0;
width: 100%;
box-sizing: border-box;
background: rgba(209, 213, 219, 1);
border-radius: 5px 5px 0 0;
box-shadow: 5px 5px 10px #9e9e9e;
}
.carcodeBox-top-line {
display: flex;
justify-content: space-between;
padding-top: 10px;
}
.car-code-finish {
display: inline-block;
width: 50px;
height: 36px;
line-height: 36px;
padding: 0 10px;
margin-right: 8px;
text-align: center;
color: #fff;
background: #007fff;
border-radius: 5px;
box-shadow: 2px 2px 3px #979797;
}
.carLicenseMain {
display: flex;
justify-content: center;
}
.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: 36px;
height: 36px;
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;
background: #fff;
border-radius: 5px;
}
.carLicenseMain ul li:nth-last-child(1) {
border: 2px dashed #00b520;
}
.carLicenseMain ul li.active {
border: 1px solid #007fff;
color: #007fff;
}
.keyboardBox {
width: 100%;
}
.provienceBox {
padding: 5px 5px;
padding-top: 3px;
}
.provienceBox ul li {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
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: 72px;
background: #f43f5e;
float: right;
color: #fff;
}
.provienceBox ul li:hover {
box-shadow: 0px 0px 3px #007fff;
}
.provienceBox ul li.deleteBtn:hover {
box-shadow: 0px 0px 3px #f43f5e;
}
#textJtBoxs {
display: block;
}
#textEnBox {
display: none;
}
@media screen and (max-width: 375px) {
.carLicenseMain ul li {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 14px;
}
.car-code-finish {
width: 40px;
height: 30px;
line-height: 30px;
font-size: 14px;
}
.provienceBox ul li {
margin: 5px 0;
}
.provienceBox ul li {
font-size: 12px;
}
.provienceBox ul li.deleteBtn {
width: 70px;
}
}
.parent-box{
padding: 10px;
border: 1px dashed #606060;
}
</style>
</head>
<body>
<ul class="parent-box">
<li>
<span class="chooseCode">查看效果请点击这里，请输入车牌号</span>
</li>
</ul>
<div class="carcodeBox">
<div class="carcodeBox-top-line">
<div class="carLicenseMain">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--<input type="text" id="carinput"/>-->
</div>
<span class="car-code-finish">完成</span>
</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>
</div>
<script>
$(".parent-box").on("click", ".chooseCode", function () {
$(".carcodeBox").attr("style", "display:flex;");
$("#textEnBox").hide();
$("#textJtBoxs").show();
});
//点击页面的其他地方，关闭小键盘
$(document).on("click", function (event) {
if (
!$(event.target).closest(".chooseCode").length &&
!$(event.target).closest(".car-code-finish").length
) {
$(".carcodeBox").hide();
$(".carLicenseMain ul li").removeClass("active");
$(".carLicenseMain ul li").eq(0).addClass("active");
$(".carLicenseMain ul li").text("");
}
});
//提交按钮，获取车牌号码
function submms() {
var carNum = "";
$(".carLicenseMain ul li").each(function (index) {
var cartext = $(this).text();
if (cartext == "" && index < 7) {
cartext = " ";
}
carNum += cartext;
});
$("#carinput").val(carNum);
if (carNum.indexOf(" ") != -1) {
alert("请填写完整车牌号");
} else {
$(".chooseCode").text(carNum);
$(".carcodeBox").hide();
$(".carLicenseMain ul li").removeClass("active");
$(".carLicenseMain ul li").eq(0).addClass("active");
$(".carLicenseMain ul li").text("");
}
}
//点击小键盘时
$(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();
console.log(indexs);
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("");
}
if (indexs == 1) {
$("#textEnBox").hide();
$("#textJtBoxs").show();
}
}
} 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();
}
if (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>
页:
[1]