Beispielcode zur Eingabe des Kennzeichens und der Provinzkürzel in html

Beispielcode zur Eingabe des Kennzeichens und der Provinzkürzel in html

Das Prinzip besteht darin, zuerst ein Div mit einer Schaltfläche zu schreiben und dann automatisch eine Tastatur entsprechend der Bildschirmgröße zu generieren. Der Effekt ist wie folgt:

Der spezifische Implementierungscode lautet wie folgt, daher werde ich nicht ins Detail gehen.

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, benutzerskalierbar=nein">
    <script type="text/javascript" src="../js/jquery-2.1.4.js"></script>
    <Stil>
        /* *{
            Schriftfamilie: „fett“;
        } */
        .Inhalt{
            Breite: 265px;
            Höhe: 353px;
            Position: absolut;
            oben: 50 %;
            links: 50 %;
            Höhe: 50 %;
            Rand: -177px 0 0 -132px;
        }
        .label_provinz{
            Position: absolut;
            oben: 6px;
            links: 10px;
        }
        .input_province{
            Position: absolut;
            Textausrichtung: zentriert;
            Breite: 26px;
            links: 1px;
            oben: 6px;
            Rand: keiner;
            Umriss: 0;  
            Schriftfamilie: „fett“;       
        }
        .Eingabeschriftart{
            Schriftgröße: 18px;
            Farbe: #333333;
        }
        .input_font_plate{
            Schriftgröße: 14px;
            Farbe: #333333;
        }
        .input_platenumber_base{
            Position: absolut;
            Textausrichtung: zentriert;
            Breite: 34px;
            oben: 13px;
            Rand: keiner;
            Umriss: 0;
        }
        .Eingabestadt{
            links: 44px;
        }

        .label_platenumber{
            Schriftgröße: 14px;
            Farbe: Nr. 999;
            Breite: 265px;
            Textausrichtung: zentriert;
            Rand oben: 29px;
            Rand: 0;
            Umriss: 0;
        }

        .input_park{
            Schriftgröße: 14px;
            Farbe: Nr. 666;
            Breite: 265px;
            Textausrichtung: zentriert;
            Rand: 0;
            Umriss: 0;
        }

            .label_btntext_bestätigen{
            Position: absolut;
            oben: 12px;
            Schriftgröße: 16px;
            Breite: 214px;
            links: 0;
        }
        .label_btn_text{
            Textausrichtung: zentriert;
            Farbe: #FFF;
            /* Schriftstärke: fett; */
        }

        .Schlüsselprovinz{
            Schriftgröße: 17px;
            Position: absolut;
            links: 2,5px;
            oben: 8px;
            Rand: 0;
            Breite: 28px;
            Textausrichtung: zentriert;
            Schriftfamilie: „fett“;
        }

    </Stil>
</Kopf>
<Text>
    <div Klasse="Inhalt">
        <div Stil="margin-top:15px;">
            <div Stil="Höhe:40px;Breite:100%;Position:relativ;oben:0;">
                <img alt="" src="../img/bg_platenumber.png" width="257" height="40" style="position:relative;left:4px;">
                <label class="label_province" für="id_province">
                    <img alt="" src="../img/border_province.png" width="28.5" height="28.5">
                    <input class="input_province" type="text" readonly="nur lesen" maxlength="1" id="id_province" onclick="provinceSelect();" value="Auswahl">
                </Bezeichnung>
                <input id="id_stadt" 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;" Typ="text" onkeyup="Wert=Wert.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
                <input id="id_plate2" class="input_platenumber_base input_platenumber_base" style="left:117px;" Typ="text" onkeyup="Wert=Wert.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
                <input id="id_plate3" class="input_platenumber_base input_platenumber_base" style="left:153px;" Typ="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;" Typ="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;" Typ="text" onkeyup="Wert=Wert.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
            </div>
            <input type="text" readonly="readonly" class="label_platenumber" value="Bitte binden Sie Ihr Kennzeichen">
        </div>

        <div Stil="margin-top:91px;">
            <div>
                <input id="id_park" type="text" readonly="readonly" class="input_park" placeholder="Bitte wählen Sie Ihren Parkplatz aus" onclick="parkSelect();">
            </div>
            <div>
                <hr id="username_devision" size=1 color=#ececec style="FILTER: alpha(opacity=100,finishopacity=0);rand links:22px;rand rechts:22px;"/>
            </div>
        </div>
        <div Stil="margin-top:90px;position:relative;oben:0;links:26px;Breite:214px;">
            <label für="bestätigen"> 
                <img id="img_confirm" width="214" height="39" alt="" src="../img/bg_btn_enable.png">
            </Bezeichnung>
            <label for="confirm" class="label_btntext_confirm label_btn_text">Bestätigen</label>
            <button type="submit" id="confirm" name="button" style="display:none;" onclick="confirm();">Bestätigen</button>
        </div>

    </div>
        <div id="id_keyboard_province" style="display:none;">
    </div>


<Skripttyp="text/javascript">

    var provinces = new Array("Provinzen", "Länder", "Staaten", "Länder", "Staaten", "Länder",
            "Henan", "Sichuan", "Chongqing", "Liaoning", "Jilin", "Heilongjiang", "Anhui", "Hubei",
            "Jin", "Gui", "Yun", "Gui", "Qiong", "Qing", "Xin", "Zang",
            „Mongolei“, „Ningxia“, „Gansu“, „Shaanxi“, „Fujian“, „Gan“, „Xiang“);
    Funktion ProvinzAuswahl(){
        Provinz anzeigen(); 
    }
    Funktion ParkSelect(){

        alert("Parkplatz auswählen");
    }
    Funktion bestätigen(){

        Alarm("OK");
    }

    Funktion showProvince(){
        var Bildschirmbreite = Fenster.Bildschirmbreite;
        //Ermittle die Anzahl der Spalten und runde sie ab. var columns = Math.floor((screenWidth - 9)/42);
        //Anzahl der Zeilen ermitteln und aufrunden var rows = Math.ceil(31/columns);
        //Berechnen Sie die Höhe des Schaltflächenhintergrunds. Dies ist die Höhe jeder Schaltfläche + Abstand + oberer und unterer Rand. 48 ist die Höhe jeder Schaltfläche + der Abstand zur nächsten Schaltfläche. var key_bg_height = rows*48+16;
        var x_space = (Bildschirmbreite - 9 - 42*Spalten)/(Spalten);
        var start_x = 9+x_Leerzeichen;
        var start_y = 12;
        var keyboard_province = document.getElementById("id_keyboard_province");
        keyboard_province.style.position="fest";
        keyboard_province.style.top= (Fenster.Bildschirm.Höhe-Taste_Hintergrundhöhe)+"px";
        Tastatur_Provinz.Stil.links=0;
        keyboard_province.style.backgroundColor="#f2f2f2";
        keyboard_province.style.width="100%";
        keyboard_province.style.height=key_bg_height+"px";
        //keyboard_provinz.style.display="Block";
        keyboard_province.innerHTML = '';

        für (var i = 0; i < Zeilen; i ++) {
            für(var j=0;j<Spalten;j++){
                var Provinz-IDs = i*Spalten+j;
                wenn (Provinz-IDs<Provinzen.Länge){
                    var x = 9+(j+1)*x_Leerzeichen+j*42;
                    var y = 12+i*48;
                    /* var addHtml = addKeyProvince(x,y,provinceIds);
                    alarm(Html ​​hinzufügen); */
                    $("#id_keyboard_province").anhängen(addKeyProvince(x,y,provinceIds));
                } 
                anders{
                    keyboard_province.style.display="Block";
                    zurückkehren;
                }
            }
        } 


    }

    Funktion 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="nur lesbar" class="key_province" value="'+provinces[provinceIds]+'" onclick="chooseProvince(this.value);">';
            </div>';
            gibt addHHTml zurück;
    }


    Funktion wähleProvinz(Provinz){
        /* Alarm(Provinz+"======"+Provinzen[7]); */
        document.getElementById("id_province").value=Provinz;
        $("#id_keyboard_province").ausblenden();
    }
</Skript>
</body>
</html>

Dies ist das Ende dieses Artikels über den Beispielcode für die HTML-Tastatur zur Eingabe von Nummernschildern und Provinzabkürzungen. Weitere relevante Inhalte zur HTML-Tastatur zur Eingabe von Nummernschildern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Detaillierte Schritte zur Entwicklung einer Java-Zahlungsschnittstelle für Alipay

>>:  Einige Erfahrungen zum Aktivieren von HTTPS

Artikel empfehlen

Implementierungsmethode für den React State-Zustand und Lebenszyklus

1. Methoden zur Implementierung von Komponenten:組...

So kapseln Sie Axios einfach in Vue

Axios in Vue einfügen importiere Axios von „Axios...

Entdecken Sie die Wahrheit hinter dem Neuladevorgang in Nginx

Der heutige Artikel stellt hauptsächlich den Neul...

Lösungsideen und Implementierungsschritte für das Problem, dass CSS und JS nach einem Struts2-Sprung ungültig werden

Wenn die JSP angezeigt wird, zu der nach der Ausfü...

MySQL 5.7.21 Installations- und Konfigurations-Tutorial unter Windows 10

Dieser Artikel zeichnet die Installations- und Ko...

Detaillierte Erklärung zur Verwendung von this.$set in Vue

Inhaltsverzeichnis Verwendung von this.$set in Vu...

Baidu Input Method öffnet API und behauptet, es könne portiert und nach Belieben verwendet werden

Der zuständige Verantwortliche für Baidu Input Met...

Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen

Inhaltsverzeichnis 1 Eine kurze Einführung in den...

Tomcat-Komponenten veranschaulichen die architektonische Entwicklung eines Webservers

1. Wer ist Tomcat? 2. Was kann Tomcat? Tomcat ist...

Vue verwendet den Rich-Text-Editor vue-quill-editor und lädt Bilder auf den Server hoch

Inhaltsverzeichnis 1. Vorbereitung 2. Definieren ...

Was Sie über das Erstellen von MySQL-Indizes wissen müssen

Inhaltsverzeichnis Vorwort: 1. Indexmethode erste...

Allgemeine Shell-Skriptbefehle und zugehöriges Wissen unter Linux

Inhaltsverzeichnis 1. Einige Punkte, die Sie beac...

Detaillierte Erläuterung der Protokollverarbeitung von Docker-Containern

Docker verfügt über viele Log-Plugins. Standardmä...

Erläuterung des Beispiels einer MySQL-Datenanalyse-Speicher-Engine

Inhaltsverzeichnis 1. Fälle vorstellen 2. Zeigen ...

CSS-Stil zum Zentrieren des HTML-Tags im Browser

CSS-Stil: Code kopieren Der Code lautet wie folgt:...