jquery+css实现车牌号码输入键盘效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery+css实现车牌号码输入键盘效果代码，适合手机及电脑端车牌输入。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.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>
            </div>
            <span class="car-code-finish" onclick="submms()">完成</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>
                .........完整代码请登录后点击上方下载按钮下载查看