原理是先寫出一個按鍵的div,然后再根據屏幕的大小去自動適應生成鍵盤，效果如下圖：

詳細實現代碼如下，就不細說了。

/* *{

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:"黑體";

}

確定

確定

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

for(var j=0;j

var provinceIds = i*columns+j;

if(provinceIds

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 = '

';

addHtml += '';

addHtml += '';

addHtml += '

';

return addHtml;

}

function chooseProvince(province){

/* alert(province+"======"+provinces[7]); */

document.getElementById("id_province").value=province;

$("#id_keyboard_province").hide();

}

到此這篇關于html中車牌號省份簡稱輸入鍵盤的示例代碼的文章就簡介到這了,更多相關html車牌號輸入鍵盤內容請搜索樂購源碼以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持樂購源碼！

總結

以上是生活随笔為你收集整理的html+车牌号选择,html中车牌号省份简称输入键盘的示例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。