做这个APP的时候有一个输入车牌号的需求，虽然没有明确，但是我还是觉得可能会需要做成那种车牌号自定义的虚拟键盘，我试了几次，最后找到一个我最喜欢的
这是原创作者的链接，分享给大家:
https://www.cnblogs.com/xhrr/p/11557020.html
在这里我也就不像这博主一样作细分了。直接一键搞定吧，还有其他事情要做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
<meta name="format-detection" content="telephone=no">
<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Document</title>
<script src="./jquery.js"></script>
<style>
html,
body,
header,
div,
h1,
h2,
h3,
h4,
form,
input,
p,
img,
ul,
li,
a,
span,
i,
strong {
padding: 0;
margin: 0;
}
html,
body {
font-size: 50px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: 'Microsoft YaHei';
line-height: 1;
min-width: 320px;
background-color: #f0f0f0;
}
ul,
li {
list-style: none;
}
i {
font-style: normal;
}
a {
text-decoration: none;
color: #333;
}
img {
border: 0;
}
input {
outline: none;
border: none;
}
/* header部分 */
header {
width: 100%;
font-size: 0;
text-align: center;
font-family: 'Microsoft YaHei';
}
header .top {
width: 100%;
height: 1.28rem;
background-color: #1c1c20;
}
header h1 img {
width: 100%;
height: 2.8rem;
}
section {
padding: 0 0.4rem;
font-size: 0;
font-family: 'Microsoft YaHei';
}
.plate {
height: 1.1rem;
margin-top: -0.4rem;
overflow: hidden;
}
.plate ul {
height: 1.1rem;
display: flex;
justify-content: center;
}
.plate li {
width: 0.76rem;
height: 1.06rem;
line-height: 1.06rem;
border: 0.02rem solid #eee;
margin-right: -0.02rem;
background-color: #fff;
font-size: 0.36rem;
text-align: center;
}
.plate .active {
border: 0.02rem solid #1aad19;
z-index: 99;
}
/* 新能源车牌号 */
/* .plate li:nth-last-child(1) {
font-size: 0.36rem;
height: 1.06rem;
} */
.plate li .new {
color: #888;
/* display: none; */
}
.plate li:nth-last-child(1) span {
display: block;
width: 0.26rem;
height: 0.26rem;
line-height: 0.2rem;
font-size: 0.2rem;
border: 0.01rem solid #888;
border-radius: 50%;
margin: 0.24rem auto 0;
}
.plate li:nth-last-child(1) i {
display: block;
font-size: 0.2rem;
line-height: 0.4rem;
margin-bottom: 0.2rem;
}
.plate li:nth-child(2) {
margin-right: 0.4rem;
}
footer {
width: 100%;
font-size: 0;
font-family: 'Microsoft YaHei';
}
/* 键盘 */
.keyboard {
/* height: 5.4rem; */
background-color: #eceef1;
position: absolute;
bottom: 0;
/* display: none; */
}
.keyboard .shut {
height: 0.54rem;
line-height: 0.54rem;
text-align: right;
padding: 0 0.16rem;
font-size: 0.28rem;
background-color: #f9f9f9;
color: #333;
border-bottom: 0.01rem solid #ddd;
border-top: 0.01rem solid #eee;
}
.keyboard ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0.16rem 0.08rem 0;
}
.keyboard li {
/* width: 0.66rem; */
width: 9%;
height: 0.96rem;
line-height: 0.96rem;
text-align: center;
border-radius: 0.16rem;
background-color: #fff;
font-size: 0.32rem;
color: #333;
margin: 0 0.08rem 0.16rem 0;
box-shadow: 0 0.04rem 0 #aaa;
}
.keyboard li:nth-child(10n) {
margin-right: 0;
}
.keyboard li:nth-last-child(1) {
width: 1.04rem;
}
/* 地区简称的键盘 */
.area {
width: 100%;
background-color: #eceef1;
position: absolute;
bottom: 0;
display: none;
}
.area .shut {
height: 0.54rem;
line-height: 0.54rem;
text-align: right;
padding: 0 0.16rem;
font-size: 0.28rem;
background-color: #f9f9f9;
color: #333;
border-bottom: 0.01rem solid #ddd;
border-top: 0.01rem solid #eee;
}
.area ul {
padding: 0.16rem 0.08rem 0;
}
.area .area-one,
.area .area-tow,
.area .area-three,
.area .area-four {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.area li {
/* width: 0.66rem; */
width: 9%;
height: 0.96rem;
line-height: 0.96rem;
text-align: center;
border-radius: 0.16rem;
background-color: #fff;
font-size: 0.32rem;
color: #333;
margin: 0 0.08rem 0.16rem 0;
box-shadow: 0 0.04rem 0 #aaa;
}
.area li:nth-child(10n) {
margin-right: 0;
}
/* .area .area-four li:nth-last-child(1) {
width: 1.04rem;
} */
/* 手机屏幕小于370px的屏幕 */
@media screen and (min-width: 450px) {
.keyboard li,
.area li {
width: 0.66rem;
}
}
/* 手机屏幕小于370px的屏幕 */
@media screen and (max-width: 370px) {
.keyboard li,
.area li {
/* width: 0.54rem; */
width: 8%;
height: 0.8rem;
line-height: 0.8rem;
}
.plate li:nth-child(2) {
margin-right: 0.1rem;
}
.plate li {
width: 0.66rem;
}
.plate li:nth-last-child(1) span {
display: block;
line-height: 0.2rem;
margin: 0.1rem auto 0;
}
.plate li:nth-last-child(1) i {
display: block;
font-size: 0.2rem;
line-height: 0.32rem;
/* margin-bottom: 0.2rem; */
}
}
/* 查询缴费 */
section .binding {
width: 100%;
height: 0.8rem;
line-height: 0.8rem;
margin-top: 1.04rem;
text-align: center;
font-size: 0.40rem;
color: #fff;
border-radius: 0.16rem;
background-color: #1aad19;
/* opacity: 0.5; */
}
/* 不足15分钟 */
section .plate-not {
font-size: 0.32rem;
line-height: 1.6rem;
text-align: center;
color: #888;
}
/* 弹出框背景变灰色 */
.poplayer3 {
width: 100%;
height: 100%;
position: absolute;
display: block;
left: 0;
top: 0;
z-index: 99;
background-color: #333;
-moz-opacity: 0.6;
opacity: 0.6;
filter: alpha(opacity=60);
display: none;
}
/* 缴费详情 */
.detail3 {
width: 5.42rem;
height: 7.68rem;
background-color: #fff;
color: #333;
border-radius: 0.16rem;
left: 50%;
top: 50%;
margin-left: -2.95rem;
margin-top: -3.68rem;
position: fixed;
z-index: 100;
display: none;
padding: 0 0.24rem;
}
.detail3 strong {
width: 0.56rem;
height: 0.56rem;
line-height: 0.56rem;
border: 0.01rem solid #e64340;
border-radius: 50%;
text-align: center;
position: absolute;
top: 0.12rem;
right: 0.12rem;
font-size: 0.32rem;
color: #e64340;
text-align: center;
}
.detail3 h3 {
font-size: 0.36rem;
text-align: center;
margin-top: 0.48rem;
}
/* 缴费信息 */
.detail3 ul {
margin: 0.8rem 0.24rem 0 0.24rem;
border-bottom: 0.01rem solid #ccc;
padding-bottom: 0.48rem;
}
.detail3 li span {
font-size: 0.28rem;
line-height: 0.48rem;
color: #666;
}
.detail3 li i {
font-size: 0.28rem;
line-height: 0.48rem;
margin-left: 1.2rem;
}
.detail3 .wechat {
width: 100%;
height: 0.8rem;
line-height: 0.8rem;
margin-top: 0.8rem;
text-align: center;
font-size: 0.40rem;
color: #fff;
border-radius: 0.16rem;
background-color: #1aad19;
/* opacity: 0.5; */
}
.detail3 .alipay {
width: 100%;
height: 0.8rem;
line-height: 0.8rem;
margin-top: 0.4rem;
text-align: center;
font-size: 0.40rem;
color: #fff;
border-radius: 0.16rem;
background-color: #108ee9;
/* opacity: 0.5; */
}
/* 缴费成功 */
.payment {
margin: 0 auto;
background-color: #fff;
border-radius: 0.16rem;
margin-top: 0.24rem;
padding: 0.24rem;
}
/* 缴费信息 */
.payment ul {
margin: 0.48rem 0.4rem 0 0.4rem;
border-bottom: 0.01rem solid #ccc;
padding-bottom: 0.48rem;
}
.payment h4 {
font-size: 0.32rem;
line-height: 0.8rem;
color: #666;
}
.payment h4 em {
font-style: normal;
font-size: 0.4rem;
color: #e64340;
}
.payment strong {
font-size: 0.28rem;
line-height: 0.48rem;
color: #e64340;
}
.payment li span {
font-size: 0.28rem;
line-height: 0.48rem;
color: #666;
}
.payment li i {
font-size: 0.28rem;
line-height: 0.48rem;
margin-left: 0.8rem;
}
.payment p {
/* text-align: right; */
font-size: 0.24rem;
line-height: 0.48rem;
color: #aaa;
}
</style>
</head>
<body>
<header>
<div class="top"></div>
</header>
<section style="margin-top: 40px;">
<div class="plate">
<ul id="plate">
<li>粤</li>
<li>B</li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<div class="new">
<span>+</span>
<i>新能源</i>
</div>
</li>
</ul>
</div>
</section>
<footer>
<!-- 键盘 -->
<div class="keyboard" id="shutkey">
<div class="shut" id="shut">关闭</div>
<ul id="keyboard">
<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>P</li>
<li>港</li>
<li>澳</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>学</li>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li>警</li>
<li>删除</li>
</ul>
</div>
<!-- 地区车牌简称 -->
<div class="area" id="area">
<div class="shut" id="shuta">关闭</div>
<ul id="keyboarda">
<div class="area-one">
<li>京</li>
<li>津</li>
<li>沪</li>
<li>渝</li>
<li>蒙</li>
<li>新</li>
<li>藏</li>
<li>宁</li>
<li>桂</li>
<li>黑</li>
</div>
<div class="area-tow">
<li>吉</li>
<li>辽</li>
<li>晋</li>
<li>冀</li>
<li>青</li>
<li>鲁</li>
<li>豫</li>
<li>苏</li>
<li>皖</li>
</div>
<div class="area-three">
<li>浙</li>
<li>闽</li>
<li>赣</li>
<li>湘</li>
<li>鄂</li>
<li>粤</li>
<li>琼</li>
<li>甘</li>
</div>
<div class="area-four">
<li>陕</li>
<li>贵</li>
<li>云</li>
<li>川</li>
<!-- <li>删除</li> -->
</div>
</ul>
</div>
</footer>
<script>
window.onload = function () {
// 初始化rem单位
(function () {
document.addEventListener('DOMContentLoaded', function () {
function htmlsize() {
let html = document.documentElement;
let windowWidth = html.clientWidth;
if (windowWidth <= 750) {
html.style.fontsize = windowWidth / 7.5 + 'px';
// 等价于html.style.fontSize = windowWidth / 750 * 100 + 'px';
} else {
html.style.fontSize = 100 + 'px';
}
}
htmlsize();
window.onresize = function () {
htmlsize()
}
}, false)
})();
(function ($) {
// 获取键盘上的关闭按钮
var oShut = $("#shut");
// 获取键盘的id
var oShutkey = $("#shutkey");
// 获取车牌框切换的id
var oPlate = $("#plate");
// 获取号码牌的li
var oPli = $("#plate li");
// 获取数字拼音软键盘的每个值
var oOli = $("#keyboard li");
// 获取地名简称软键盘的每个值
var oOlia = $("#keyboarda li");
// 获取地方简称键盘的id
var oArea = $("#area");
// 获取地方简称的关闭按钮
var oShuta = $("#shuta");
// 获取查询缴费的id
var oBinding = $("#binding");
// 获取显示车牌号的id
var oPlateNum = $("#platenum");
// 获取弹出框的id
var oDetail3 = $("#detail3");
// 获取小红叉的id
var oCancelParking3 = $("#CancelParking3");
// 获取背景灰色的id
var oPoplayer3 = $("#poplayer3");
// 点击关闭，关闭键盘
oShut.click(function () {
oShutkey.slideUp(100);
});
// 点击关闭，关闭地名键盘
oShuta.click(function () {
oArea.slideUp(100);
});
// 切换车牌号码框的函数
(function () {
// 定义车牌框变量
var oPok = 2;
// 定义键盘变量
var oOlok;
// 给车牌框绑定点击事件
oPli.bind("click", function () {
// 获取车牌框里面的索引值
var index = $(this).index();
// 点击哪个框就给哪个框添加绿色框，并去掉其他绿色框
$(this).addClass("active").siblings().removeClass("active");
oPok = index;
// 隐藏新能源信息
function onew() {
$(".new").show(50);
};
// 隐藏地名简称键盘
function oarea() {
oArea.slideUp(200);
};
// 显示数字拼音键盘
function oshutkey() {
oShutkey.slideDown(200);
};
// 当点击第一个的时候，调出地名简称键盘
if (oPok === 0) {
onew();
oArea.slideDown(200);
oShutkey.slideUp(200);
// 当点击最后一个的时候隐藏自己的innerText值
} else if (oPok === 7) {
$(".new").hide(100);
oarea()
oshutkey()
// 当点击第二个的时候，弹出数字拼音键盘
} else if (oPok === 1) {
onew();
oarea()
oshutkey()
// 当点击第7个的时候全部显示
} else if (oPok === 6) {
onew();
oarea()
oshutkey()
// 当点击其他车牌框的时候调出数字拼音键盘
} else {
onew();
oarea()
oshutkey()
};
});
// 给数字拼音键盘绑定点击事件
oOli.bind("click", function () {
// 获取键盘的索引
var index = $(this).index();
oOlok = index;
// 绿色框加到下一个
function opli() {
oPli.eq(oPok).addClass("active").siblings().removeClass("active");
};
// 点击删除按钮，往后回删内容
if (oOlok === 38) {
oPli.eq(oPok).html("");
oPok--;
opli();
// 当回删到第一个的时候隐藏数字拼音键盘，显示地名简称键盘
if (oPok === 0) {
oArea.slideDown(200);
oShutkey.slideUp(200);
//
} else if (oPok < 8) {
oPli.eq(7).html('<div class="new"><span>+</span><i>新能源</i></div>');
};
} else {
// 点击数字拼音键盘替换获取车牌框索引值的值
oPli.eq(oPok).html(this.innerText);
// 每点击一次增加一次索引
oPok++;
// 每点击一次绿色框跳转到下一个
opli();
}
// 当绿色框达到第7个的时候隐藏绿色框，并隐藏键盘
if (oPok > 6) {
oShutkey.slideUp(200);
oPli.removeClass("active");
};
});
// 给地名键盘绑定点击事件
oOlia.bind("click", function () {
// 点击简称键盘获取车牌索引值的值
oPli.eq(oPok).html(this.innerText);
// 点击一次增加一次索引
oPok++;
if (oPok === 1) {
oArea.slideUp(200);
oShutkey.slideDown(200);
};
// 点击一次绿色框跳转到下一个
oPli.eq(oPok).addClass("active").siblings().removeClass("active");
});
// 点击查询缴费弹出框，并获取输入的车牌号
oBinding.click(function () {
var oStr;
// 判断车牌最后一位长度是否大于1
if (oPli.eq(7).text().length > 1) {
// 如果大于1，显示前7位
oStr = $("#plate li:lt(7)").text();
oPlateNum.text(oStr);
} else {
// 最后一位输入车牌就显示8位
oStr = $("#plate li:lt(8)").text();
oPlateNum.text(oStr);
};
// 显示弹框
oDetail3.show(100);
// 显示背景层
oPoplayer3.show();
});
})();
// 点击小红叉隐藏页面
oCancelParking3.click(function () {
oDetail3.hide(100);
oPoplayer3.hide();
});
})(jQuery);
}
</script>
</body>
</html>
以上就是jquery车牌号自定义虚拟键盘的解决方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
