Aktivieren/deaktivieren Sie Eingangsfelder mit JavaScript

Beim Erstellen eines Formulars oder eines Fragebogens ist die Anforderung, den Benutzer an einem bestimmten Punkt zu fordern, während ein Eingabebuch einfüllt ist. Zum Beispiel die Anzahl der Zeichen innerhalb eines Feldes einbeschränken i.e. “Kontakt Nr”. Darüber hinaus, um eine Voraussetzung für das Ausfüllen eines bestimmten Feldes usw. anzuwenden, usw. In solchen Fallszenarien ist das Aktivieren/Deaktivieren von Eingabefeldern in JavaScript ein sehr bequemer Ansatz für den Entwickler- und das Ende des Benutzers.

In diesem Tutorial werden die Ansätze erläutert, um Eingangsfelder mit JavaScript zu aktivieren/zu deaktivieren.

So aktivieren/deaktivieren Sie Eingangsfelder mit JavaScript?

Um Eingabefelder mit JavaScript zu aktivieren/zu deaktivieren, können die folgenden Ansätze in Kombination mit der “verwendet werdenBehinderte" Eigentum:

• “ONCLICK" Fall.
• “AddEventListener ()" Methode.

Ansatz 1: Aktivieren/Deaktivieren von Eingabefeldern mithilfe von JavaScript mithilfe von Onclick -Events

Ein "ONCLICKEreignis wird verwendet, um die angegebene Funktion umzuleiten. Dieses Ereignis kann angewendet werden, um die entsprechende Funktion zum Aktivieren und Deaktivieren von Eingabefeldern auf der Schaltfläche Klicken aufzurufen und zu deaktivieren.

Beispiel

Schauen wir uns das unterbewertete Beispiel an:

Textfeld aktivieren/deaktivieren

Führen Sie im obigen Code die folgenden Schritte aus:

• Einen Eingang eingeben “Text"Feld mit dem angegebenen"Ausweis" Und "Platzhalter" Werte.
• Erstellen Sie außerdem zwei separate Schaltflächen mit angehängten “ONCLICKEreignisse, die zu zwei verschiedenen Funktionen umleiten, um die Eingangsfelder zu aktivieren und zu deaktivieren.

Fahren wir mit dem JavaScript -Teil des Codes fort:

Führen Sie im obigen Code -Snippet die folgenden Schritte aus:

• Eine Funktion namens deklarieren “deaktiviertfield ()”.
• Greifen Sie in seiner Definition auf das erstellte Eingangsfeld durch seine “zu.“Ausweis" Verwendung der "dokumentieren.GetElementById ()" Methode
• Wenden Sie im nächsten Schritt die anBehinderte”Eigenschaft und zuweisen Sie ihm den Booleschen Wert“WAHR”. Dies führt dazu, dass das Eingabefeld bei der Schaltfläche Klick deaktiviert wird.
• In ähnlicher Weise definieren Sie eine Funktion namens “enablefield ()”.
• Wiederholen Sie in seiner Definition den für den Zugriff auf das Eingangsfeld besprochenen Schritt in ähnlicher Weise.
• Hier zuweisen die “BehinderteEigentum als "FALSCH”. Dies führt dazu, dass das Feld Deaktivierter Eingangsfeld aktiviert wird.

Ausgang

In der obigen Ausgabe kann beobachtet werden, dass das Eingangsfeld deaktiviert und ordnungsgemäß aktiviert ist.

Ansatz 2: Aktivieren/Deaktivieren der Eingabefelder mithilfe der JavaScript mithilfe der AddEventListener () -Methode

Der "AddEventListener ()Die Methode wird verwendet, um ein Ereignis an das Element anzuhängen. Diese Methode kann implementiert werden, um ein Eingabefeld basierend auf dem beigefügten Ereignis und dem angegebenen “zu deaktivieren und zu aktivierenTaste”.

Syntax

In der obigen Syntax:

• “Fall”Bezieht sich auf den Namen des Ereignisses.
• “Funktion”Zeigt auf die ausführende Funktion.
• “verwendenIst der optionale Parameter.

Beispiel

Beobachten wir das unterbewertete Beispiel:

Textfeld aktivieren/deaktivieren

In den obigen Codezeilen:

• Fügen Sie die angegebene Überschrift ein.
• Wiederholen Sie im nächsten Schritt die im vorherigen Ansatz diskutierte Methode, um ein Eingabefeld mit dem angegebenen “zu berücksichtigenAusweis" Und "Platzhalter" Werte.

Gehen wir mit dem JavaScript -Teil des Codes fort:

Führen Sie im obigen Code -Snippet die folgenden Schritte aus:

• Zugriff auf das Eingangsfeld durch die “Ausweis" Verwendung der "dokumentieren.GetElementById ()" Methode.
• Wenden Sie im nächsten Schritt die anAddEventListener ()"Methode und ein Ereignis namens" anhängen "Taste nach unten”.
• Im weiteren Code die “zuweisen“BehinderteEigentum als "FALSCH”Zum Aktivieren des Eingangsfeldes.
• Schließlich in der “anders”Zustand, zuordnen die“BehinderteEigentum als "WAHR”Zum Deaktivieren des aktivierten Eingangsfeldes beim Drücken der“Eingeben" Taste.

Ausgang

Aus der obigen Ausgabe ist es offensichtlich, dass das Eingangsfeld beim Drücken auf die “deaktiviert wirdEingeben" Taste.

Abschluss

Der "Behinderte”Eigenschaft in Kombination mit dem“ONCLICK”Ereignis oder das“AddEventListener ()”Methode kann angewendet werden, um Eingangsfelder mit JavaScript zu aktivieren/zu deaktivieren. Der erstere Ansatz kann verwendet werden, um die entsprechende Funktion umzuleiten, um das Eingabefeld bei der Schaltfläche Klick zu aktivieren/zu deaktivieren. Der letztere Ansatz kann implementiert werden, um die erforderliche Funktionen basierend auf dem beigefügten Ereignis und dem angegebenen “durchzuführenTaste”. In diesem Artikel wird erläutert, wie die Eingabefelder in JavaScript aktiviert/deaktiviert werden können.