HTML でナンバープレート番号と州の略語を入力するためのサンプルコード

原理としては、まずボタン付きの div を記述し、次に画面のサイズに応じて自動的に適応してキーボードを生成します。効果は次のようになります。

具体的な実装コードは以下の通りなので詳細は割愛します。

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、ユーザースケーラブル=いいえ">
    <script type="text/javascript" src="../js/jquery-2.1.4.js"></script>
    <スタイル>
        /* *{
            フォントファミリ:"太字";
        } */
        。コンテンツ{
            幅:265ピクセル;
            高さ:353px;
            位置:絶対;
            上位:50%;
            残り:50%;
            高さ:50%;
            マージン:-177px 0 0 -132px;
        }
        .label_province{
            位置:絶対;
            上:6px;
            左:10px;
        }
        .input_province{
            位置:絶対;
            テキスト配置:中央;
            幅:26px;
            左:1px;
            上:6px;
            境界線:なし;
            アウトライン:0;  
            フォントファミリ:"太字";       
        }
        .input_font{
            フォントサイズ:18px;
            色:#333333;
        }
        .input_font_plate{
            フォントサイズ:14px;
            色:#333333;
        }
        .input_platenumber_base{
            位置:絶対;
            テキスト配置:中央;
            幅:34px;
            上:13px;
            境界線:なし;
            アウトライン:0;
        }
        .input_city{
            左:44px;
        }

        .ラベルプレート番号{
            フォントサイズ:14px;
            色:#999;
            幅:265ピクセル;
            テキスト配置:中央;
            上マージン:29px;
            境界線:0;
            アウトライン:0;
        }

        .input_park{
            フォントサイズ:14px;
            色:#666;
            幅:265ピクセル;
            テキスト配置:中央;
            境界線:0;
            アウトライン:0;
        }

            .label_btntext_confirm{
            位置:絶対;
            上:12px;
            フォントサイズ:16px;
            幅:214px;
            左:0;
        }
        .label_btn_text{
            テキスト配置:中央;
            色:#FFF;
            /* フォントの太さ: 太字; */
        }

        .key_province{
            フォントサイズ:17px;
            位置:絶対;
            左:2.5px;
            上:8px;
            境界線:0;
            幅:28px;
            テキスト配置:中央;
            フォントファミリ:"太字";
        }

    </スタイル>
</head>
<本文>
    <div class="content">
        <div style="margin-top:15px;">
            <div スタイル="高さ:40px;幅:100%;位置:相対;上: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" 幅="28.5" 高さ="28.5">
                    <input class="input_province" type="text" readonly="readonly" maxlength="1" id="id_province" onclick="provinceSelect();" value="冀">
                </ラベル>
                <input id="id_city" class="input_platenumber_base input_platenumber_base" style="left:45px;" type="text" onkeyup="value=value.replace(/[^[AZ]+$/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="確認"> 
                <img id="img_confirm" width="214" height="39" alt="" src="../img/bg_btn_enable.png">
            </ラベル>
            <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" スタイル="display:none;">
    </div>


<script type="text/javascript">

    var Provinces = new Array("京","沪","浙","江苏","粤","鲁","山西","冀",
            「河南省」、「四川省」、「重慶市」、「遼寧省」、「吉林省」、「黒龍江省」、「安徽省」、「湖北省」
            「金」、「桂」、「雲」、「桂」、「瓊」、「清」、「新」、「藏」、
            「モンゴル」、「寧夏」、「甘粛」、「陝西」、「福建」、「贛」、「湘」);
    関数 州選択(){
        州を表示します。 
    }
    関数parkSelect(){

        alert("駐車場を選択してください");
    }
    関数確認(){

        アラート("OK");
    }

    関数 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 = (画面幅 - 9 - 42*列数)/(列数);
        var start_x = 9 + x_space;
        var start_y = 12;
        var keyboard_province = document.getElementById("id_keyboard_province");
        keyboard_province.style.position="固定";
        keyboard_province.style.top= (window.screen.height-key_bg_height)+"px";
        キーボードのスタイルを左に0にします。
        キーボードのスタイル:
        キーボードのスタイルの幅を100%にします。
        keyboard_province.style.height=key_bg_height+"px";
        //keyboard_province.style.display="ブロック";
        keyboard_province.innerHTML = '';

        for(var i=0;i<rows;i++){
            for(var j=0;j<columns;j++){
                var 州 ID = i*列 + j;
                (provinceIds<provinces.length)の場合{
                    var x = 9 + (j + 1) * x_space + j * 42;
                    変数 y = 12+i*48;
                    /* var addHtml = addKeyProvince(x,y,provinceIds);
                    アラート(HTMLを追加); */
                    $("#id_keyboard_province").append(addKeyProvince(x,y,provinceIds));
                } 
                それ以外{
                    keyboard_province.style.display="ブロック";
                    戻る;
                }
            }
        } 


    }

    関数 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);">';
            HTML を追加します。
            addHtml を返します。
    }


    関数 chooseProvince(province){
        /* アラート(州+"======"+州[7]); */
        document.getElementById("id_province").value=州;
        キーボードのプロパティを非表示にする
    }
</スクリプト>
</本文>
</html>

html ナンバープレート番号の州略語入力キーボードのサンプルコードに関するこの記事はこれで終わりです。より関連性の高い html ナンバープレート番号入力キーボードのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: Alipay の Java 決済インターフェースを開発するための詳細な手順

>>: HTTPS の有効化に関する経験の共有