JavaScript zum Implementieren der Inhaltsaufforderung und der versteckten Funktion des Eingabefelds

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

Artikel empfehlen

Detaillierte Analyse des temporären JDBC- und MySQL-Tablespace

Hintergrund Temporäre Tablespaces werden verwende...

Detaillierte Erklärung des Rastersystems, der Navigationsleiste und des Karussells von Javascript Bootstrap

Inhaltsverzeichnis Einführung in Bootstrap und di...

Zusammenfassung der Kompatibilitätsprobleme beim Flex-Layout

1. W3C-Versionen von Flex Version 2009 Flag: Anze...

Natives JS zur Implementierung des Spiels 2048

2048 Minispiel, zu Ihrer Information, der spezifi...

Diagramm des Installations- und Verwendungstutorials für MySQL 8.0.17

Vorne geschrieben In der Vergangenheit und in akt...

Beispiel für die Implementierung von QR-Code-Scaneffekten mit CSS3

Online-Vorschau https://jsrun.pro/AafKp/ Erster B...

MySQL-Lösung zur Verschlüsselung ganzer Tabellen, keyring_file, detaillierte Erläuterung

veranschaulichen MySql Community Edition unterstü...

Erlernen Sie schnell die Verwendung von Docker zum Erstellen einer Entwicklungsumgebung

Da die Plattform weiter wächst, ist die Forschung...

3D-Tunneleffekt implementiert durch CSS3

Der erzielte EffektImplementierungscode html <...

Detaillierte Erläuterung der Idee, mysql8.0.11 zu installieren, das Root-Passwort zu ändern und Navicat für MySQL zu verbinden

1.1. Herunterladen: Laden Sie das Zip-Paket von d...

Einführung in das Methodenattribut des Formularformulars in HTML

1 Methode ist eine Eigenschaft, die angibt, wie Da...

Detaillierte Erklärung zur Verwendung von Vue Smooth DnD, einer verschiebbaren Komponente von Vue

Inhaltsverzeichnis Einführung und Demo API: Conta...

Detaillierte Erklärung der Verwendung des chmod-Befehls in Linux

chmod-Befehlssyntax Dies ist die korrekte Syntax ...

Zwei Möglichkeiten, mit IIS X-Forwarded-For Header (XFF) aufzurufen, um die tatsächliche IP des Besuchers aufzuzeichnen

Problem: Die über IIS veröffentlichte Website wir...

Mysql 5.7.18 Verwenden von MySQL proxies_priv zur Implementierung einer ähnlichen Benutzergruppenverwaltung

Verwenden Sie MySQL proxies_priv (simulierte Roll...