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
So löschen Sie den Timer elegant in Vue
Inhaltsverzeichnis Vorwort Optimierung Ableitungs...
Detaillierte Erläuterung des Ausführungsprinzips des MySQL-Kill-Befehls
Inhaltsverzeichnis Prinzip der Kill-Befehlsausfüh...
Schritte zum Öffnen des MySQL-Binlogs
Binlog ist eine binäre Protokolldatei, die zum Au...
Einführung in den vollständigen Namen und die Funktion von HTML-Tags
Alphabetisch DTD: Gibt an, in welcher XHTML 1.0 D...
Lösung für die nicht angezeigte IP-Adresse unter Linux
Inhaltsverzeichnis Vorwort Lösung: Schritt 1 Schr...
Detaillierte Erläuterung des Docker-Visualisierungsgrafiktools Portainer
Inhaltsverzeichnis 1. Einführung in Portainer 2. ...
Einfaches Tutorial zur Verwendung von Navicat für MySQL
empfehlen: Detailliertes Tutorial zur Registrieru...
MySQL Online-DDL-Tool Gh-Ost-Prinzipanalyse
Inhaltsverzeichnis 1. Einleitung 1.1 Grundsatz 1....
Virtual Box-Tutorialdiagramm zum Duplizieren virtueller Maschinen
Nachdem man sich an VM gewöhnt hat, ist der Wechs...
WeChat-Applet: benutzerdefinierter TabBar-Schrittdatensatz
Inhaltsverzeichnis 1. Einleitung 2. Passen Sie de...
Details zur Destrukturierungszuweisung in Javascript
Inhaltsverzeichnis 1. Array-Dekonstruktion 2. Obj...
So verwenden Sie JSONP in Vue
Inhaltsverzeichnis 1. Einleitung 2. Installation ...
vue realisiert die Anpassung der Spaltenbreite von el-table perfekt
Inhaltsverzeichnis Hintergrund Technische Lösung ...
Implementierung der Nginx-Domänennamenweiterleitung für den HTTPS-Zugriff
Ein Wort vorab: Plötzlich erhielt ich die Aufgabe...
So verwenden Sie Binlog zur Datenwiederherstellung in MySQL
Vorwort Kürzlich wurden Daten online falsch bearb...