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

Grafisches Tutorial zur Offline-Installation und Konfiguration von MySQL 8.0.2

JavaScript zum Anzeigen versteckten Formulartexts

Umsetzungsideen

Beispiel 1:

Beispiel 2

Grafisches Tutorial zur Offline-Installation und Konfiguration von MySQL 8.0.2

Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder

So richten Sie eine VSCode-Remoteverbindung zum Server-Docker-Container ein

Implementierung der Graustufenversion mit Nginx und Lua

SQL-Anweisungen in MySQL verwenden keine Indizes

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Detaillierte Erläuterung des Prozesses zum Konfigurieren mehrerer SVN-Repositorys auf Linux-Servern

So implementieren Sie eine verschachtelte if-Methode in Nginx

Detaillierte Erläuterung des Implementierungsprinzips der Transaktionsisolationsstufe in MySQL

RHCE installiert Apache und greift mit einem Browser auf IP zu

Artikel empfehlen

So invertieren Sie die Implementierung einer Bézierkurve in CSS

Die Vorteile von Div+CSS und Web-Standardseiten

Anwendung zur Verarbeitung von HTML-Tag-Überläufen

Ein einfaches Beispiel für die MySQL-Suche nach Daten im Umkreis von N Kilometern

So richten Sie domänenübergreifenden Zugriff in IIS web.config ein

MySQL-Datenbankbeschränkungen und Prinzipien des Datentabellenentwurfs

Detaillierte Interpretation der Datei /etc/fstab im Linux-System

Lassen Sie uns im Detail darüber sprechen, wie JavaScript den Aufbau des DOM-Baums beeinflusst

Bedingtes Rendering von Vue (v-if und v-show)

Einführung in die Verwendung von MySQL-Quellbefehlen

Lösung für MySQL: Das Installationsprogramm wird im Community-Modus ausgeführt

Funktionsweise von SQL-SELECT-Datenbankabfragen

Fünf Möglichkeiten zum Durchlaufen von Objekten in JavaScript Beispielcode

Flex-Anordnung in CSS darstellen (Layouttool)

Warum MySQL die Verwendung von Unterabfragen und Verknüpfungen nicht empfiehlt