html中车牌号省份简称输入键盘

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

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

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><script type="text/javascript"  src="../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;}.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 class="content"><div style="margin-top:15px;"><div 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;"><label class="label_province" for="id_province"><img alt="" src="../img/border_province.png" width="28.5" height="28.5"><input class="input_province" type="text" readonly="readonly" maxlength="1" id="id_province" onclick="provinceSelect();" value="冀"></label><input id="id_city" class="input_platenumber_base input_platenumber_base" style="left:45px;" type="text" onkeyup="value=value.replace(/[^[A-Z]+$/g,'')" maxlength="1"><input id="id_plate1" class="input_platenumber_base input_platenumber_base" style="left:81px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1"><input id="id_plate2" class="input_platenumber_base input_platenumber_base" style="left:117px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1"><input id="id_plate3" class="input_platenumber_base input_platenumber_base" style="left:153px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1"><input id="id_plate4" class="input_platenumber_base input_platenumber_base" style="left:189px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1"><input id="id_plate5" class="input_platenumber_base input_platenumber_base" style="left:225px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1"></div><input type="text" readonly="readonly" class="label_platenumber" value="请绑定您的车牌号"></div><div style="margin-top:91px;"><div><input id="id_park" type="text" readonly="readonly" class="input_park" placeholder="请选择您的停车场" onclick="parkSelect();"></div><div><hr  id="username_devision" size=1 color=#ececec style="FILTER: alpha(opacity=100,finishopacity=0);margin-left:22px;margin-right:22px;"/></div></div><div style="margin-top:90px;position:relative;top:0;left:26px;width:214px;"><label for="confirm"> <img id="img_confirm" width="214" height="39" alt="" src="../img/bg_btn_enable.png"></label><label for="confirm" class="label_btntext_confirm label_btn_text">确定</label><button type="submit" id="confirm" name="button" style="display:none;" onclick="confirm();">确定</button></div></div><div id="id_keyboard_province" style="display:none;"></div><script 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 = '<div 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 += '<input id="id_'+provinceIds+'" type="text" readonly="readonly" class="key_province" value="'+provinces[provinceIds]+'" onclick="chooseProvince(this.value);">';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中车牌号省份简称输入键盘相关推荐

html5车牌效果,html中车牌号省份简称输入键盘的示例代码
这篇文章主要介绍了html中车牌号省份简称输入键盘的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧原理是先写出一个按键的 ...
Android自定义一个省份简称键盘
hello啊各位老铁,这篇文章我们重新回到Android当中的自定义View,其实最近一直在搞Flutter,初步想法是,把Flutter当中的基础组件先封装一遍,然后接着各个工具类,列表,网络,统统 ...
显示省份简称，如内蒙古自治区：内蒙古
需要实现的效果图: 1.过滤不需要显示的省份 this.filterArea('台湾省') this.filterArea('香港特别行政区') this.filterArea('澳门特别行政区') ...
微信小程序自定义车牌号输入键盘-附源码
键盘已做过处理第一位只能是省份简称,第二位只能输入字母,第三位以后可以输入数字加字母的组合,输入完成后有正则方法校验车牌号的合法性.高效率车牌号输入键盘,大大提升用户体验,增强用户输入车牌号的真实性 ...
android 自定义键盘_Android自定义输入车牌号键盘、车牌简称，数字，字母键盘...
本文来自阿钟的投稿,全文阅读大约十分钟为了便于用户快捷的输入车牌号码便需要自定义个车牌键盘,而不是使用系统的键盘输入,上效果图: 横屏效果图片竖屏效果图片一.首先我们要来分析一下需要做哪些东 ...
车牌号专用键盘设计和正则验证
在做和汽车相关的项目的时候,可能会遇到自定义车牌键盘的情况,我们知道,汽车车牌有省份简称和后面的字母数字构成,而且现在新兴的新能源汽车的车牌和传统车牌还有些差距,如果需要对车牌号进行输入校验,需要的正 ...
Java车牌号校验正则表达式
最近接到需求需要写一个车牌号校验的正则表达式,由于校验比较严格,包含新能源车牌还有领事馆之类的规则,网上的正则都不是很详细,于是自己写了一个. 正则表达式: String pattern = &quo ...
车牌号合法性校验正则表达式（含新能源车牌）
普通车牌号校验(正则) /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/ 包含新能源校验 ...
车牌号正则表达式-普通车和新能源车
车牌号正则表达式-含普通车和新能源车普通车一.普通车规则: 二.普通车正则表达式: 新能源车一.新能源车规则: 二.新能源车正则表达式两种车牌通用一.正则表达式普通车一.普通车规则: 1 ...
最常用的几个数据验证正则判断，手机号，车牌号，身份证，Email,IP
*** 对手机号码进行校验 *** * 移动号段: 134 135 136 137 138 139 147 148 150 151 152 157 158 159 172 * 178 182 183 ...

html中车牌号省份简称输入键盘

html中车牌号省份简称输入键盘相关推荐

最新文章

热门文章