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
Tutorial zur manuellen Installation und Konfiguration von mysql8.0.11 winx64
Lassen Sie mich zunächst über meinen Alltag sprec...
Grundlegende Hinweise zu HTML und CSS (unbedingt für das Frontend lesen)
Als ich zum ersten Mal mit HTML in Berührung kam,...
Implementierung des Imports und Exports von Vue-Element-Admin-Projekten
vue-element-admin importiert Komponentenkapselung...
Detaillierter Prozess zum Upgrade von gcc (Version 10.2.0) in der CentOS7-Umgebung
Inhaltsverzeichnis Kurze Einleitung 1. Überprüfen...
MySQL-Update-Fall Update-Feldwert ist keine feste Operation
Wenn bei der Verarbeitung von Batch-Updates besti...
So stellen Sie eigenständigen Pulsar und geclustertes Redis mit Docker bereit (Entwicklungsartefakt)
Inhaltsverzeichnis 1. Einleitung: 2. Docker: 1 Be...
Hinweise zum erweiterten Zeichengerätetreiber des Linux-Kernel-Gerätetreibers
/****************** * Erweiterter Zeichengerätetr...
Beispiele für die korrekte Verwendung von AES_ENCRYPT() und AES_DECRYPT() zum Verschlüsseln und Entschlüsseln von MySQL
Vorwort Kürzlich stieß ich bei der Arbeit auf ein...
MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Win10
Super ausführliches Tutorial zur Installation und...
Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)
Öffnen Sie eine beliebige Webseite, zum Beispiel ...
Der Implementierungsprozess der Linux-Prozessnetzwerkverkehrsstatistik
Vorwort Linux verfügt über entsprechende Open-Sou...
12 Javascript-Tabellensteuerelemente (DataGrid) sind aussortiert
Wenn die DataSource-Eigenschaft eines DataGrid-Ste...
Beispielcode zur Implementierung einer Anmelde- und Registrierungsvorlage in Vue
Vorlage 1: anmelden.vue <Vorlage> <p Kla...
Iframe-Parameter mit Anweisungen und Beispielen
<iframe src=”test.jsp” Breite=”100″ Höhe=”50″ ...
Über das WeChat Mini-Programm zur Implementierung von Cloud-Zahlungen
Inhaltsverzeichnis 1. Einleitung 2. Gedankenanaly...