原理是先写出一个按键的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,车牌号,键盘
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“html中车牌号省份简称输入键盘的示例代码”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]