JavaScript zum Anzeigen versteckten Formulartexts

JavaScript zum Anzeigen versteckten Formulartexts

Dieser Artikel gibt Ihnen den spezifischen JavaScript-Code zur Anzeige von verstecktem Formulartext als Referenz. Der spezifische Inhalt ist wie folgt

Umsetzungsideen

Verwenden Sie Onfocus- und Onblur -Ereignisse

onfocus- - -Fokus erhalten (Mausklick auf das Eingabefeld, und im Eingabefeld erscheint ein blinkender Cursor)

onblur- - - Fokusverlust (die Maus wird im Eingabefeld nicht ausgewählt und der blinkende Cursor im Eingabefeld geht verloren)

1. Legen Sie einen Standardwert für das Eingabefeld fest

2. Holen Sie sich das Eingabefeldobjekt und binden Sie Ereignisse daran: onfocus und onblur
Beim Erhalten des Fokus (onfocus) - - - Bestimmen Sie, ob der Wert des Eingabefelds der Standardwert ist. Wenn es der standardmäßige Anfangswert ist, ändern Sie den Wert in „leer“. Der standardmäßige Anfangswert verschwindet und Sie können Ihren eigenen Wert eingeben. Beim Entfernen des Fokus (onblur) - - - Bestimmen Sie, ob der Wert des Eingabefelds keinen Wert hat. Wenn nicht, weisen Sie dem Wert den Standardwert zu. Der Standardwert wird erneut angezeigt, nachdem der nicht eingegebene Inhalt entfernt wurde.

3. Sie können auch unterschiedliche Textfarben für den Fokus- und den Fokus-verloren-Zustand festlegen, um die beiden Zustände deutlicher hervorzuheben.

Beispiel 1:

Code:

<!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>Fokus gewinnen/verlieren</title>
    <Stil>
        Eingabe {
            Farbe: #ccc;
            Gliederung: keine;
        }
    </Stil>
</Kopf>

<Text>
    <Eingabetyp="Text" Wert="Mobil">
    <Skript>
        var text = document.querySelector('Eingabe');
        text.onfocus = Funktion() {
            wenn (this.value === 'Mobiltelefon') {
                dieser.Wert = '';
            }
            diese.Stil.Farbe = "#333";
        }

        text.onblur = function() {
            wenn (dieser.Wert === '') {
                this.value = 'Mobiltelefon';
            }
            diese.Stil.Farbe = "#ccc";
        }
    </Skript>
</body>

</html>

Seiteneffekt:

Beispiel 2

Code:

<!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>Benutzername anzeigen ausblenden</title>
    <Stil>
        Eingabe {
            Schriftgröße: 14px;
            Farbe: #999;
            Gliederung: keine;
            Polsterung: 3px 0 3px 10px;
            Rand: 1px durchgezogen #ccc;
        }
    </Stil>
</Kopf>

<Text>
    <!--Benutzername zeigt versteckten Inhalt-->
    <input type="text" value="E-Mail/ID/Telefonnummer" class="Benutzername">
    <Skript>
        var Benutzername = document.querySelector('.userName');
        BenutzerName.onfocus = function() {
            if (this.value === 'E-Mail/ID/Telefonnummer') {
                dieser.Wert = '';
                diese.Stil.Bordfarbe = "pink";
            } anders {
                diese.Stil.Bordfarbe = "pink";
                diese.Stil.Farbe = "#999";
            }
        }
        BenutzerName.onblur = function() {
            wenn (dieser.Wert === '') {
                this.value = 'E-Mail/ID/Telefonnummer';
                diese.Stil.Bordfarbe = "#ccc";
                diese.Stil.Farbe = "#999";
            } anders {
                diese.Stil.Bordfarbe = "#ccc";
                diese.Stil.Farbe = "#333";
            }
        }
    </Skript>
</body>

</html>

Seiteneffekt:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • JS implementiert das Klicken auf das kleine Auge im Formular, um das Passwort im versteckten Passwortfeld anzuzeigen
  • Formularkennwort basierend auf JavaScript ausblenden und anzeigen
  • JS implementiert den Effekt der Hinzufügung einer Rahmenanzeige zum Kontrollkästchen im Formular
  • So zeigen Sie den Inhalt eines Formulars mit JavaScript auf dem Bildschirm an
  • So zeigen Sie mit JavaScript die Anzahl der Elemente in einem Formular an
  • Lösung zum Anzeigen von Eingabeaufforderungsinformationen im Kennwortformular unter js

<<:  So überwachen Sie Tomcat mit LambdaProbe

>>:  Analyse des Prozesses zum Aufbau einer Clusterumgebung mit Apache und Tomcat

Artikel empfehlen

Einige Erfahrungen in der Selbstkultivierung von Künstlern

Da der Einfluss des Unternehmens wächst und seine...

Beispiel für das Hinzufügen und Löschen von Bereichspartitionen in MySQL 5.5

einführen Die RANGE-Partitionierung basiert auf e...

Detaillierte Erklärung zum Ein- und Aussteigen aus dem Docker-Container

1 Starten Sie den Docker-Dienst Zuerst müssen Sie...

Zwei spezielle Werte in CSS werden verwendet, um die Vererbungs- und Initialisierungsmethoden der Kaskade zu steuern

Es gibt zwei spezielle Werte, die jeder Eigenscha...

Verwenden Sie die Befehle more, less und cat in Linux, um Dateiinhalte anzuzeigen

Unter Linux können die Befehle cat, more und less...

MySQL deaktiviert die Überprüfung der Kennwortstärke

Informationen zur Überprüfung der Kennwortstärke:...

Strategie zur Optimierung der Leistung von MySQL-Datenbankabfragen

Optimieren von Abfragen Verwenden der Explain-Anw...

Nginx-Reverseproxy und Lastausgleichspraxis

Reverse-Proxy Unter Reverse-Proxy versteht man de...

Einige wichtige Einstellungsänderungsdatensätze beim Upgrade von kubernetes1.5.2 auf kubernetes1.10

Dieser Artikel zeichnet einige wichtige Einstellu...

Beispiele für die Verwendung des ES6-Spread-Operators

Inhaltsverzeichnis Was sind Spread- und Rest-Oper...

Detailliertes Verständnis des Lebenszyklusvergleichs zwischen Vue2 und Vue3

Inhaltsverzeichnis Zyklusvergleich Verwendung Zus...

Mehrere Möglichkeiten zum Senden von HTML-Formularen_PowerNode Java Academy

Methode 1: Absenden über den Absenden-Button <...

Eine kurze Diskussion über die Matching-Regeln von Host und Benutzer, wenn Mysql eine Verbindung zur Datenbank herstellt

--Beim Verbinden mit der Datenbank die Matching-R...

Was ist SSH? Wie benutzt man? Was sind die Missverständnisse?

Inhaltsverzeichnis Vorwort Was ist SSH? Wofür wir...

So konfigurieren Sie ein SSL-Zertifikat in Nginx, um den HTTPS-Dienst zu implementieren

Nachdem wir im vorherigen Artikel mit OpenSSL ein...