html中车字号省份简称输入键盘的示例代码

2025-10-30 04:18:20 1

这篇文章主要介绍了html中车牌号省份简称输入键盘的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

原理是先写出一个按键的p,然后再根据屏幕的大小去自动适应生成键盘，效果如下图：

具体实现代码如下，就不细说了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<ｓｃｒｉｐｔ type="text/javascript" src="../js/jquery-2.1.4.js"></ｓｃｒｉｐｔ>
<style>
/* *{
font-family:"黑体";
} */
.content{
width:265px;
height:353px;
position:absolute;
top:50%;
left:50%;
height:50%;
margin:-177px 0 0 -132px;
}
.label_province{
position:absolute;
top:6px;
left:10px;
}
.input_province{
position:absolute;
text-align:center;
width:26px;
left:1px;
top:6px;
border:none;
outline:0;
font-family:"黑体";
}
.input_font{
font-size:18px;
color:#333333;
}
.input_font_plate{
font-size:14px;
color:#333333;
}
.input_platenumber_base{
position:absolute;
text-align:center;
width:34px;
top:13px;
border:none;
outline:0;
}
.input_city{
left:44px;
}

.label_platenumber{
font-size:14px;
color:#999;
width:265px;
text-align:center;
margin-top:29px;
border:0;
outline:0;
}

.input_park{
font-size:14px;
color:#666;
width:265px;
text-align:center;
border:0;
outline:0;
}

.label_btntext_confirm{
position:absolute;
top:12px;
font-size:16px;
width:214px;
left:0;
}
.label_btn_text{
text-align:center;
color:#FFF;
/* font-weight:bold; */
}

.key_province{
font-size:17px;
position:absolute;
left:2.5px;
top:8px;
border:0;
width:28px;
text-align:center;
font-family:"黑体";
}

</style>
</head>
<body>
<p >
<p style="margin-top:15px;">
<p style="height:40px;width:100%;position:relative;top:0;">
<img alt="" src="../img/bg_platenumber.png" width="257" height="40" style="position:relative;left:4px;">
<labelfor="id_province">
<img alt="" src="../img/border_province.png" width="28.5" height="28.5">
<inputtype="text" readonly="readonly" maxlength="1"onclick="provinceSelect();" value="冀">
</label>
<input style="left:45px;" type="text" onkeyup="value=value.ｒｅｐｌａｃｅ(/[^[A-Z]+$/g,'')" maxlength="1">
<input style="left:81px;" type="text" onkeyup="value=value.ｒｅｐｌａｃｅ(/[^[A-Z0-9]+$/g,'')" maxlength="1">
<input style="left:117px;" type="text" onkeyup="value=value.ｒｅｐｌａｃｅ(/[^[A-Z0-9]+$/g,'')" maxlength="1">
<input style="left:153px;" type="text" onkeyup="value=value.ｒｅｐｌａｃｅ(/[^[A-Z0-9]+$/g,'')" maxlength="1">
<input style="left:189px;" type="text" onkeyup="value=value.ｒｅｐｌａｃｅ(/[^[A-Z0-9]+$/g,'')" maxlength="1">
<input style="left:225px;" type="text" onkeyup="value=value.ｒｅｐｌａｃｅ(/[^[A-Z0-9]+$/g,'')" maxlength="1">
</p>
<input type="text" readonly="readonly"value="请绑定您的车牌号">
</p>

</p>
<pstyle="display:none;">
</p>

<ｓｃｒｉｐｔ type="text/javascript">

var provinces = new Array("京","沪","浙","苏","粤","鲁","晋","冀",
"豫","川","渝","辽","吉","黑","皖","鄂",
"津","贵","云","桂","琼","青","新","藏",
"蒙","宁","甘","陕","闽","赣","湘");
function provinceSelect(){
showProvince();
}
function parkSelect(){

alert("选择停车场");
}
function confirm(){

alert("确定");
}

function showProvince(){
var screenWidth=window.screen.width;
//求出列数，向下取整
var columns = Math.floor((screenWidth - 9)/42);
//求出行数，向上取整
var rows = Math.ceil(31/columns);
//算出按键背景的高度，为每个按键的高度+间隔+上下边距，48为每个按键的高度+距下一个按键的距离
var key_bg_height= rows*48+16;
var x_space = (screenWidth - 9 - 42*columns)/(columns);
var start_x = 9+x_space;
var start_y = 12;
var keyboard_province = document.getElementById("id_keyboard_province");
keyboard_province.style.position="fixed";
keyboard_province.style.top= (window.screen.height-key_bg_height)+"px";
keyboard_province.style.left=0;
keyboard_province.style.backgroundColor="#f2f2f2";
keyboard_province.style.width="100%";
keyboard_province.style.height=key_bg_height+"px";
//keyboard_province.style.display="block";
keyboard_province.innerHTML = '';

for(var i=0;i<rows;i++){
for(var j=0;j<columns;j++){
var provinceIds = i*columns+j;
if(provinceIds<provinces.length){
var x = 9+(j+1)*x_space+j*42;
var y = 12+i*48;
/* var addHtml = addKeyProvince(x,y,provinceIds);
alert(addHtml); */
$("#id_keyboard_province").append(addKeyProvince(x,y,provinceIds));
}
else{
keyboard_province.style.display="block";
return;
}
}
}

}

function addKeyProvince(x,y,provinceIds){

var addHtml = '<p style="position:absolute;left:'+x+'px;top:'+y+'px;width:42px;height:48px;">';
addHtml += '<label for="id_'+provinceIds+'"><img alt="" width="34" height="38" src="../img/bg_key_province.png"></label>';
addHtml += '<inputtype="text" readonly="readonly"value="'+provinces[provinceIds]+'" onclick="chooseProvince(this.value);">';
addHtml += '</p>';
return addHtml;
}

function chooseProvince(province){
/* alert(province+"======"+provinces[7]); */
document.getElementById("id_province").value=province;
$("#id_keyboard_province").hide();
}
</ｓｃｒｉｐｔ>
</body>
</html>

来源：本站

链接：https://www.jb51.net/web/731451.html

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。