生活随笔
收集整理的這篇文章主要介紹了
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>.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;}.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);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.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;$("#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){document.getElementById("id_province").value=province;$("#id_keyboard_province").hide();}
</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的html中车牌号省份简称输入键盘的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
