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

Schreiben Sie zuerst ein Eingabeaufforderungsfeld auf die Seite und setzen Sie dann die CSS-Eigenschaft des Eingabeaufforderungsfelds: display auf none, um es auszublenden
Holen Sie sich das Eingabefeldelementobjekt und das Informationseingabeaufforderungsfeldelementobjekt
Binden Sie Tastaturereignisse an das Eingabefeldelementobjekt - - -keyup,
Eventhandler: Bestimmen Sie, ob der Eingabeinhalt leer ist. Wenn nicht, weisen Sie den Inhalt des Eingabefelds dem Informationseingabefeld zu und legen Sie die Anzeige des Informationseingabefelds fest: Die Anzeige wird auf Blockieren gesetzt; wenn es leer ist, legen Sie fest, dass das Eingabefeld nicht angezeigt wird
Fügen Sie Ereignisse zum Fokusgewinn und Fokusverlust hinzu.
Unschärfe - - Fokus verloren: Wenn die Maus das Eingabefeld nicht auswählt und im Eingabefeld kein Cursor blinkt, wird das Informationseingabefeld nicht angezeigt: Anzeige ist auf Keine eingestellt
Fokus - - - Fokus erhalten: Wenn die Maus auf das Eingabefeld klickt und der Cursor im Eingabefeld blinkt, wird festgestellt, dass das Informationsaufforderungsfeld angezeigt wird, wenn das Eingabefeld Inhalt enthält.

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:

Express-Trackingnummer query.gif

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:

Implementierung der Fuzzy-Prompt-Funktion des Javascript-Eingabefelds
JS realisiert den Effekt des Verschwindens des Eingabeaufforderungstexts des Eingabefelds, wenn darauf geklickt wird
Methoden zur Ausgabe von Informationen in JavaScript (Informationsbestätigungsfeld – Eingabeaufforderungseingabefeld – Dokumentflussausgabe)
Native js realisiert das Anzeigen und Ausblenden des Werts im Kennworteingabefeld
Den anfänglichen Inhalt nach der Aktivierung des Eingabefelds mithilfe von Javascript ausblenden

<<: Detaillierte Erklärung der Datenmengen von Docker-Containern

>>: Manjaro-Installation CUDA-Implementierungs-Tutorial-Analyse

Lösung für ungültige Nginx-Cross-Domain-Einstellung Access-Control-Allow-Origin

JavaScript zum Implementieren der Inhaltsaufforderung und der versteckten Funktion des Eingabefelds

Lösung für ungültige Nginx-Cross-Domain-Einstellung Access-Control-Allow-Origin

Detaillierte Erklärung redundanter und doppelter Indizes in MySQL

Detaillierte Erläuterung der Installation und Konfiguration des Nginx+Tomcat-Load-Balancing-Clusters

Informationen zum Bereitstellen eines Webprojekts auf dem Alibaba Cloud Server (in 5 Schritten)

Schritte zum Installieren von Superset unter dem Win10-System

Lösen Sie das chinesische verstümmelte Problem der MySQL5.5-Datenbank-Befehlszeile unter Windows 10

Detailliertes Tutorial zur Installation von Docker und der Docker-Compose-Suite unter Windows

MySQL Serie 12 Backup und Wiederherstellung

TypeScript-Problem beim Iterieren über Objekteigenschaften

Zusammenfassung verschiedener Methoden zur MySQL-Datenwiederherstellung

Artikel empfehlen

Node+Express zum Erzielen eines Paging-Effekts

Detailliertes grafisches Tutorial zur Installation der entpackten Version von MySQL unter Windows 10

Linux-System zum Anzeigen von CPU, Maschinenmodell, Speicher und anderen Informationen

Einige Hinweise zur MySQL-Self-Join-Deduplizierung

JS realisiert den Scroll-Effekt von Online-Ankündigungen

So finden Sie Websites mit SQL-Injection (unbedingt lesen)

Grafisches Tutorial zur Installation der MySQL-Datenbank und Konfiguration von Umgebungsvariablen auf dem Mac

Datenbank löschen und weglaufen? So sichern Sie die MySQL-Datenbank mit xtraback

Remote-Entwicklung mit VSCode und SSH

MySQL-Einstellungen zum Ändern des Root-Passworts, MySQL-Serververbindung, Diagramm allgemeiner MySQL-Befehle

Vue realisiert problemlos Wasserzeicheneffekte

So löschen Sie schnell alle Tabellen in MySQL, ohne die Datenbank zu löschen

Einführung in den Aufbau von NFS-Diensten unter Centos7

Detaillierte Erklärung von Cgroup, dem Kernprinzip von Docker

Navicat kann keine Funktionslösungsfreigabe erstellen