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

詳細(xì)實現(xiàn)代碼如下，就不細(xì)說了。

/* *{

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;

//求出列數(shù)，向下取整

var columns = Math.floor((screenWidth - 9)/42);

//求出行數(shù)，向上取整

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();

}

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。