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

Detaillierte Erklärung der Überwachungseigenschaften von Vue

Inhaltsverzeichnis Vue-Monitoreigenschaften Was i...

So erstellen Sie ein Docker-Repository mit Nexus

Das mit dem offiziellen Docker-Register erstellte...

Einführung in die Verwendung von MySQL-Befehlen zum Erstellen, Löschen und Abfragen von Indizes

MySQL-Datenbanktabellen können Indizes erstellen,...

Lösung zur automatischen Beendigung von Docker Run-Containern

Heute ist bei mir ein Problem aufgetreten, als ic...

So implementieren Sie die Kontrollkästchen- und Radioausrichtung

Nicht nur das Verhalten verschiedener Browser ist...

Vue2-Implementierungen bieten Injection für Reaktionsfähigkeit

1. Konventionelles Schreiben in vue2 // Die überg...

Ein Beispiel für die Installation von MySQL unter Linux und die Konfiguration des externen Netzwerkzugriffs

Konfigurationsschritte 1. Überprüfen Sie, ob DNS ...

So verwenden Sie @media in mobilen adaptiven Stilen

Allgemeiner Handy-Stil: @media alle und (Ausricht...

Verwendung von relativen und absoluten Pfaden unter Linux

01. Übersicht Absolute und relative Pfade kommen ...

So wechseln Sie zwischen Vue-Produktions- und Entwicklungsumgebungen und verwenden Filter

Inhaltsverzeichnis 1. Wechseln Sie zwischen Produ...

So installieren Sie MySQL 5.7.29 mit einem Klick mithilfe eines Shell-Skripts

Dieser Artikel bezieht sich auf die Arbeit des 51...

Tutorial zum Erstellen einer VSCode+CMake+Clang+GCC-Umgebung unter Win10

Ich möchte C/C++ verwenden, um grundlegende Daten...

HTML-Zeichnungsbenutzer-Registrierungsseite

In diesem Artikel wird der spezifische Implementi...

Verwenden Sie PSSH zur Stapelverwaltung von Linux-Servern

pssh ist eine in Python implementierte Open-Sourc...

Lizenzschlüssel für VMware Workstation Pro 16 mit Nutzungs-Tutorial

VMware Workstation ist eine leistungsstarke virtu...