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

Detailliertes Tutorial zur Installation und Konfiguration von Nginx unter Centos7

Klicken Sie auf die Schaltfläche, um den Text in ein Eingabefeld umzuwandeln. Klicken Sie auf „Speichern“, um ihn in Textimplementierungscode umzuwandeln.

Artikel

MySQL Installations-Tutorial unter Windows mit Bildern und Text

JavaScript zum Implementieren der Inhaltsaufforderung und der versteckten Funktion des Eingabefelds

Detailliertes Tutorial zur Installation und Konfiguration von Nginx unter Centos7

Detaillierte Erklärung der MySQL-Datumsadditions- und -subtraktionsfunktionen

So beheben Sie den 10060-Unknow-Fehler, wenn Navicat eine Remote-Verbindung zu MySQL herstellt

Gründe und Lösungen für das fehlgeschlagene Einfügen von Emoji-Ausdrücken in MySQL

Zusammenfassung einiger gängiger Konfigurationen und Techniken von Nginx

Zusammenfassung der mobilen Anpassungslösung von webpack

Klicken Sie auf die Schaltfläche, um den Text in ein Eingabefeld umzuwandeln. Klicken Sie auf „Speichern“, um ihn in Textimplementierungscode umzuwandeln.

MySQL Installations-Tutorial unter Windows mit Bildern und Text

Sehen Sie sich den Befehl zum Ändern der MySQL-Tabellenstruktur an

Detaillierte Erläuterung der MySQL SQL-Anweisungsanalyse und Abfrageoptimierung

Artikel empfehlen

Anpassungsmethode des Linux-Peripheriedateisystems

So lösen Sie das Problem des ungültigen linken Joins in MySQL und die Vorsichtsmaßnahmen bei seiner Verwendung

Detaillierte Erklärung, wie eine SQL-Anweisung in MySQL ausgeführt wird

Klassen in TypeScript

Lernen Sie die Vue-Middleware-Pipeline in einem Artikel kennen

Swiper+echarts realisiert den Links- und Rechts-Scrolleffekt mehrerer Dashboards

Implementierung des gemeinsamen Grid-Layouts

js implementiert Axios Limit-Anforderungswarteschlange

jQuery Canvas generiert ein Poster mit einem QR-Code

So laden Sie das JAR-Paket über die Webseite auf Nexus hoch

Detaillierte Erläuterung des Beobachtermodus ausgehend von der Komponentenwertübertragung von Vue

Zusammenfassung des MySQL-Installationsdiagramms

React implementiert ein allgemeines Beispiel für eine Skelett-Bildschirmkomponente

Was bedeutet Eingabetyp und wie kann die Eingabe begrenzt werden?

So erstellen Sie einen NFS-Dienst in Ubuntu 16.04