html中車牌號(hào)省份簡(jiǎn)稱輸入鍵盤(pán)的示例代碼

發(fā)布時(shí)間：2020-06-19 16:34:08 作者：ALittleShip

這篇文章主要介紹了html中車牌號(hào)省份簡(jiǎn)稱輸入鍵盤(pán)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

具體實(shí)現(xiàn)代碼如下，就不細(xì)說(shuō)了。

<!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="請(qǐng)綁定您的車牌號(hào)">
        </div>

        <div style="margin-top:91px;">
            <div>
                <input id="id_park" type="text" readonly="readonly" class="input_park" placeholder="請(qǐng)選擇您的停車場(chǎng)" 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("選擇停車場(chǎng)");
    }
    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);
        //算出按鍵背景的高度，為每個(gè)按鍵的高度+間隔+上下邊距，48為每個(gè)按鍵的高度+距下一個(gè)按鍵的距離
        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>

到此這篇關(guān)于html中車牌號(hào)省份簡(jiǎn)稱輸入鍵盤(pán)的示例代碼的文章就介紹到這了,更多相關(guān)html車牌號(hào)輸入鍵盤(pán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！