Wie erhalte ich den Textbereichswert in JavaScript?

Wie Erhalte Ich Den Textbereichswert In Javascript



Bei der Gestaltung reaktionsschneller Webseiten oder Sites ist es erforderlich, den Benutzer auf die eingegebenen Daten hinzuweisen, um sicherzustellen, dass die eingegebenen Daten korrekt sind. Zum Beispiel das Bestätigen der eingegebenen Mails und Passwörter. Im anderen Fall wird bei einer ausgewählten Option ein Fehler oder eine Warnung protokolliert, was zu ernsthaften Folgen führen kann, z.

In diesem Artikel werden die Ansätze zum Abrufen von Textbereichswerten in JavaScript erläutert.

Wie erhalte ich den Textbereichswert in JavaScript?

Der Textbereichswert kann in JavaScript mit den folgenden Ansätzen abgerufen werden:







  • getElementById() ' Methode.
  • addEventListener() ' Methode.
  • jQuery “.

Ansatz 1: Textbereichswert in JavaScript mit der Methode getElementById() abrufen

Das ' getElementById() “-Methode greift auf ein Element mit der angegebenen „ Ich würde „.Diese Methode kann implementiert werden, um das Eingabetextfeld abzurufen und den darin eingegebenen Wert zurückzugeben.



Syntax



dokumentieren. getElementById ( Element )

In der angegebenen Syntax:





  • Element ' bezieht sich auf ' Ich würde ” für das jeweilige Element abgerufen werden.

Beispiel
Schauen wir uns das folgende Beispiel an:

Lassen Sie uns die folgenden Schritte im folgenden Code anwenden:



< h3 > Textbereichswert erhalten in JavaScript h3 >
Schreibe etwas : < Eingabetyp = 'Text' Ich würde = 'txt' Platzhalter = 'Text eingeben...' >
< Schaltfläche anklicken = 'textareaValue()' > Wert erhalten Taste >

Führen Sie die folgenden Schritte aus:

  • Geben Sie im ersten Schritt die angegebene Überschrift an.
  • Fügen Sie danach das Eingabetextfeld mit dem angegebenen „ Ich würde ' und ' Platzhalter ' Wert.
  • Erstellen Sie außerdem eine Schaltfläche mit einem angehängten „ anklicken ” Ereignisumleitung zur Funktion textareaValue()

Kommen wir zum JavaScript-Teil des Codes:

< Skript >
Funktion TextbereichWert ( ) {
Lassen erhalten = dokumentieren. getElementById ( 'txt' ) . Wert
Alarm ( erhalten )
}
Skript >

Im obigen JavaScript-Code:

  • Deklarieren Sie eine Funktion mit dem Namen „ textareaValue() “.
  • Greifen Sie in seiner Definition über die angegebene ID auf das Eingabetextfeld zu, indem Sie das „ getElementById() ' Methode.
  • Wenden Sie auch das „ Wert ”-Eigenschaft, um den eingegebenen Textwert abzurufen.
  • Zeigen Sie schließlich den Textbereichswert über das „ Alarm ' Dialog Box.

Ausgabe

In der obigen Ausgabe kann beobachtet werden, dass der eingegebene Wert über das Warndialogfeld abgerufen wird.

Ansatz 2: Textbereichswert in JavaScript mithilfe der addEventListener()-Methode abrufen

Das ' addEventListener() ”-Methode wird verwendet, um ein “ Veranstaltung “ mit einem Element. Diese Methode kann verwendet werden, um ein Ereignis an die Funktion anzuhängen, sodass der Textbereichswert bei jeder Eingabe nebeneinander auf der Konsole abgerufen wird.

Syntax

Element. addEventListener ( Veranstaltung , Funktion , Exekutive )

In der obigen Syntax:

  • Veranstaltung “ zeigt auf den Ereignisnamen.
  • Funktion “ gibt die Funktion an, die beim Auslösen eines Ereignisses ausgeführt werden soll.
  • Exekutive ” ist der optionale Parameter.

Beispiel
Folgen wir dem unten angegebenen Beispiel Schritt für Schritt:

< Etikett zum = 'txt' > Schreibe etwas : Etikett >< Br >< Br >
< Textbereich-ID = 'txtarea' Reihen = '5' Spalten = '25' Platzhalter = ' Text eingeben...' > Textbereich >
< Skripttyp = 'text/javascript' >
Lassen erhalten = dokumentieren. getElementById ( 'txtarea' ) ;
Konsole. Protokoll ( erhalten . Wert ) ;
erhalten . addEventListener ( 'Eingang' , Funktion TextbereichWert ( Veranstaltung ) {
Konsole. Protokoll ( Veranstaltung. Ziel . Wert ) ;
} ) ;
Skript >

Im obigen Code-Snippet:

  • Geben Sie die angegebene Bezeichnung an. Ordnen Sie auch die „ Textbereich ” Element mit dem angegebenen Wert von „ Ich würde ' und ' Platzhalter “ und passen Sie auch seine Abmessungen an.
  • Greifen Sie im JavaScript-Teil des Codes auf den im vorherigen Schritt angegebenen Textbereich zu und zeigen Sie ihn mit dem „ Wert ' Eigentum.
  • Hängen Sie im nächsten Schritt ein Ereignis an“ Text „zum Abgeholten“ Textbereich ' Verwendung der ' addEventListener() ” Methode und wende sie auf die Funktion an “ textareaValue() “. Das ' Veranstaltung “ in seinem Argument gibt Informationen über das ausgelöste Ereignis weiter.
  • Dadurch werden alle eingegebenen Textwerte nebeneinander protokolliert.

Ausgabe

Aus der obigen Ausgabe ist die „ holen ” von jedem der eingegebenen Textwerte kann beobachtet werden.

Ansatz 3: Textbereichswert in JavaScript mit jQuery abrufen

jQuery ” angewendet werden, um auf das Eingabetextfeld zuzugreifen und seine Funktionen auszulösen, sobald das Document Object Model (DOM) geladen ist.

Beispiel
Folgen wir dem unten angegebenen Beispiel:

< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' > Skript >
Schreibe etwas : < Eingabetyp = 'Text' Ich würde = 'txt' Platzhalter = 'Text eingeben...' >
< Taste > Wert erhalten Taste >

Führen Sie in den obigen Codezeilen die folgenden Schritte aus:

  • Binden Sie die jQuery-Bibliothek ein, um ihre Methoden anzuwenden.
  • Präzisiere das ' Eingang ” als Textfeld mit den angegebenen Werten von „ Ich würde ' und ' Platzhalter “, wie zuvor besprochen.
  • Erstellen Sie außerdem eine Schaltfläche, um den Wert beim Klicken auf die Schaltfläche zu erhalten.

Fahren Sie mit dem JavaScript-Teil des Codes fort:

< Skript >
$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( 'Taste' ) . klicken ( Funktion ( ) {
Konsole. Protokoll ( $ ( 'Eingabetext' ) . Wert ( ) ) ;
} ) ;
} ) ;
Skript >

Befolgen Sie die angegebenen Schritte:

  • Wende an ' bereit() ”-Methode, um die weiteren Methoden auf das geladene DOM anzuwenden.
  • Greifen Sie auf die erstellte Schaltfläche zu und hängen Sie das „ klicken() ”-Methode, die die angegebene Funktion in ihrem Parameter ausführt.
  • Die Methode click() greift auf das angegebene Eingabetextfeld zu und protokolliert den eingegebenen Textwert auf der Konsole.

Ausgabe

Daher wird der Wert des Typs auf der Konsole protokolliert.

Dies waren all die verschiedenen Möglichkeiten, den Wert des Textbereichs mit Hilfe von JavaScript zu ermitteln.

Fazit

Das ' getElementById() “-Methode, die „ addEventListener() “ Methode oder die „ jQuery “ kann verwendet werden, um den Textbereichswert in JavaScript zu erhalten. Die Methode getElementById() kann implementiert werden, um auf das Eingabetextfeld zuzugreifen und den eingegebenen Textbereichswert per Alarm anzuzeigen. Die Methode addEventListener() kann verwendet werden, um ein „ Eingang ”-Ereignis, das den Textwert bei jeder Eingabe nebeneinander erhält. Die jQuery kann angewendet werden, um direkt auf die Schaltfläche zuzugreifen und den eingegebenen Textwert beim Klicken auf die Schaltfläche in der Konsole abzurufen. In diesem Tutorial wird erläutert, wie Sie den Textbereichswert in JavaScript abrufen.