副标题#e#
短视频，自媒体，达人种草一站服务
这篇文章主要介绍了html中车牌号省份简称输入键盘的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
原理是先写出一个按键的div,然后再根据屏幕的大小去自动适应生成键盘，效果如下图：
具体实现代码如下，就不细说了。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta content=”width=device-width, initial-scale=1, user-scalable=no”>
<script type=”text/javascript” src=”http://www.admin5.com/article/js/jquery-2.1.4.js”></script>
<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;
}
#p#副标题#e##p#分页标题#e#
.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>
<div>
<div>
<div>
<img alt=”” src=”http://www.admin5.com/article/img/bg_platenumber.png”>
<label for=”id_province”>
<img alt=”” src=”http://www.admin5.com/article/img/border_province.png”>
<input type=”text” readonly=”readonly” maxlength=”1″ value=”冀”>
</label>
<input type=”text” onkeyup=”value=value.replace(/[^[A-Z]+$/g,”)” maxlength=”1″>
<input type=”text” onkeyup=”value=value.replace(/[^[A-Z0-9]+$/g,”)” maxlength=”1″>
<input type=”text” onkeyup=”value=value.replace(/[^[A-Z0-9]+$/g,”)” maxlength=”1″>
<input type=”text” onkeyup=”value=value.replace(/[^[A-Z0-9]+$/g,”)” maxlength=”1″>
<input type=”text” onkeyup=”value=value.replace(/[^[A-Z0-9]+$/g,”)” maxlength=”1″>
<input type=”text” onkeyup=”value=value.replace(/[^[A-Z0-9]+$/g,”)” maxlength=”1″>
</div>
<input type=”text” readonly=”readonly” value=”请绑定您的车牌号”>
</div>
<div>
<div>
<input type=”text” readonly=”readonly” placeholder=”请选择您的停车场”>
</div>
<div>
<hr size=1 color=#ececec/>
</div>
</div>
<div>
<label for=”confirm”>
<img alt=”” src=”http://www.admin5.com/article/img/bg_btn_enable.png”>
</label>
<label for=”confirm”>确定</label>
<button type=”submit”>确定</button>
</div>
</div>
<div>
</div>
<script type=”text/javascript”>
#p#副标题#e##p#分页标题#e#
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){
#p#副标题#e##p#分页标题#e#
var addHtml = ‘<div>’;
addHtml += ‘<label for=”id_’+provinceIds+'”><img alt=”” src=”http://www.admin5.com/article/img/bg_key_province.png”></label>’;
addHtml += ‘<input type=”text” readonly=”readonly” value=”‘+provinces[provinceIds]+'”>’;
addHtml += ‘</div>’;
return addHtml;
}
function chooseProvince(province){
/* alert(province+”======”+provinces[7]); */
document.getElementById(“id_province”).value=province;
$(“#id_keyboard_province”).hide();
}
</script>
</body>
</html>
到此这篇关于html中车牌号省份简称输入键盘的示例代码的文章就介绍到这了,更多相关html车牌号输入键盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
