JavaScript zum Implementieren der Inhaltsaufforderung und der versteckten Funktion des Eingabefelds
|
Manchmal ist das Eingabefeld klein und Sie möchten nach der Eingabe des Inhalts ein Eingabefeld mit vergrößertem Eingabeinhalt sehen. Umsetzungsideen
Beachten Sie, dass dies das Ereignis ist, bei dem die Tastatur losgelassen wird. Verwenden Sie nicht das Ereignis „Taste gedrückt“ oder „Taste gedrückt“. Die eingegebenen Wörter werden nicht eingegeben, wenn die Tastatur gedrückt wird. Die eingegebenen Wörter werden nur eingegeben, wenn die Tastatur losgelassen wird. Codebeispiel:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>JD Express Trackingnummernabfrage simulieren</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
Eingabe {
Gliederungsstil: keiner;
}
.suchen {
Position: relativ;
Breite: 220px;
Rand: 100px automatisch;
}
.die Info {
Anzeige: keine;
Position: absolut;
oben: -40px;
links: 0;
Breite: 170px;
Polsterung: 5px 0;
Schriftgröße: 18px;
Zeilenhöhe: 20px;
Rand: 1px durchgezogen rgba(0, 0, 0, .2);
Kastenschatten: 0px 2px 4px rgba(0, 0, 0, .2);
}
.info::vor {
Inhalt: '';
Breite: 0;
Höhe: 0;
Position: absolut;
oben: 28px;
links: 18px;
Rand: 8px durchgezogen #000;
Rahmenfarbe: #fff transparent transparent;
Rahmenstil: durchgezogen gestrichelt gestrichelt;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Suche">
<div class="info">(*´▽｀)-Symbol</div>
<input type="text" class="express" placeholder="Bitte geben Sie die Express-Nummer ein, die Sie abfragen möchten">
<Eingabetyp="Schaltfläche" Wert="Abfrage">
</div>
<Skript>
var expressNo = document.querySelector('.express');
var info = document.querySelector('.info');
expressNo.addEventListener('keyup', Funktion() {
console.log(Ausdrucksnr.Wert);
Konsole.log(info.innerHTML);
wenn (dieser.Wert == '') {
info.style.display = "keine";
} anders {
info.style.display = "Block";
info.innerHTML = dieser.Wert;
}
});
// Fokus verlieren, Box ausblenden expressNo.addEventListener('blur', function() {
info.style.display = "keine";
})
//Holen Sie sich das Fokusereignis und zeigen Sie das Feld an expressNo.addEventListener('focus', function() {
wenn (dieser.Wert !== '') {
info.style.display = "Block";
}
})
</Skript>
</body>
</html>Seiteneffekt:
Dies ist das Ende dieses Artikels über die Verwendung von JavaScript zum Implementieren von Eingabefeld-Inhaltsaufforderungen und versteckten Funktionen. Weitere verwandte JS-Eingabefeld-Inhaltsaufforderungen und versteckte Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung der Datenmengen von Docker-Containern
>>: Manjaro-Installation CUDA-Implementierungs-Tutorial-Analyse
Artikel empfehlen
Detaillierte Erklärung zur Verwendung des Feldsatzes und der Legende für seltene Tags
Was <fieldset> und <legend> betrifft,...
So implementieren Sie das Prototypmuster in JavaScript
Überblick Das Prototypmuster bezieht sich auf den...
Analyse der Vor- und Nachteile von gespeicherten MySQL-Prozeduren
MySQL Version 5.0 begann, gespeicherte Prozeduren...
So installieren Sie Docker und Portainer in Kali
Mit dem Aufkommen von Docker haben sich viele Die...
jQuery implementiert Funktionen zum Reduzieren und Erweitern von Artikeln
Dieses Artikelbeispiel teilt den spezifischen Cod...
Reines CSS zum Erreichen einer einzelnen Div-Transformation eines regulären Polygons
Im vorherigen Artikel haben wir vorgestellt, wie ...
Implementierungsprozessdatensatz für benutzerdefinierte Vue-Tabellenspalten
Inhaltsverzeichnis Vorwort Rendern setTable-Kompo...
Beispiel für die Anzeige von Bildjalousien mit reinem CSS
Lassen Sie mich Ihnen zunächst den fertigen Effek...
So erstellen Sie einen pptpd-Dienst in Alibaba Cloud Ubuntu 16.04
1. Um ein PPTP-VPN aufzubauen, müssen Sie Port 17...
js implementiert ein einfaches Englisch-Chinesisch-Wörterbuch
In diesem Artikel wird der spezifische Code von j...
JS implementiert einen Stoppuhr-Timer
In diesem Artikelbeispiel wird der spezifische JS...
Detaillierte Erläuterung inkompatibler Änderungen an Rendering-Funktionen in Vue3
Inhaltsverzeichnis Änderungen an der Rendering-AP...
Centos7.3 startet oder führt beim Booten automatisch angegebene Befehle aus
In CentOS7 wurden die Berechtigungen der Datei /e...
HTML übertrifft das Implementierungsprinzip und den Code des Textzeilenabfangs
Der HTML-Code zum Abfangen von mehrzeiligem Text l...
Detaillierte Erläuterung der Generierung dynamischer Bibliotheken unter Linux und Anleitung zur Verwendung
Der Dateiname der dynamischen Bibliotheksdatei un...