Holen Sie sich den Textbereichswert in JavaScript

  2. How-To's
  3. JavaScript-Anleitungen
  4. Holen Sie sich den Textbereichswert in …
Muhammad Muzammil Hussain 12 Oktober 2023
JavaScript JavaScript Text
  1. Holen Sie sich den Textbereichswert in JavaScript
  2. Holen Sie sich den Textbereichswert in jQuery
Holen Sie sich den Textbereichswert in JavaScript

In der Webentwicklung müssen wir meistens den Textbereichswert mithilfe von HTML-DOM-Dokumenten und anderen Bibliotheken lesen und abrufen. Wir können damit umgehen, indem wir sowohl JavaScript- als auch jQuery-Standardfunktionen verwenden.

In diesem Artikel lernen wir, den Wert des Textbereichs einer Webseite mit JavaScript und jQuery abzurufen und in einer Variablen zu speichern.

Holen Sie sich den Textbereichswert in JavaScript

In JavaScript können wir den Textwert mit der HTML-DOM-Dokumentmethode getElementById("elementId").value lesen. Die Methode getElementById() gibt ein Element mit definiertem Wert zurück; wenn das Element nicht existiert, gibt es null zurück.

Die Eigenschaft .value platziert und gibt den Wert des Attributs value eines Textbereichs zurück. Diese Eigenschaft trägt den Standardwert oder den Wert, den ein Benutzer angibt.

Grundlegende Syntax:

Hier erhalten wir den Wert eines bestimmten Elements, indem wir die ID verwenden und in der Variablen textValue speichern.

let textValue = document.getElementById('myText').value

Beispielcode:

<!DOCTYPE html>
<html>
<body>

<h1>
Get text area value in JavaScript
</h1>

Enter any value: <input type="text" id="myElement" value="Default">

<p>Click the button to read the value.</p>

<button onclick="myFunction()">Read Value</button>

<script>
function myFunction() {
 let result = document.getElementById("myElement").value //getting value, storing in variable
  alert(result) // displaying in alert
}
</script>

</body>
</html>

Beispielcode-Erklärung:

  1. In der obigen HTML-Quelle haben wir ein Eingabefeld erstellt, um den Wert vom Benutzer zu erhalten.
  2. Dann haben wir ein onclick-Ereignis für diese Schaltfläche namens myFunction() erstellt.
  3. Im Hauptteil von myFunction() haben wir die Variable result deklariert und dieser Variablen mit document.getElementById("myElement").value einen Elementwert zugewiesen.
  4. Schließlich haben wir dem Benutzer den Variablenwert Ergebnis in einer Warnung angezeigt.
  5. Sie können die obige Quelle mit der Erweiterung .html speichern und sie in einem beliebigen Browser öffnen, um das Ergebnis zu sehen.

Holen Sie sich den Textbereichswert in jQuery

In jQuery können wir den Textwert mit der jQuery-Methode $("#elementID").val() lesen. Zuerst müssen wir jQuery CDN (Content Delivery Network) in Skript-Tags des Headers hinzufügen.

Beispielcode:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
    alert( $("input:text").val()); //read value from input and display in alert
    });
});
</script>
</head>
<body>

Enter any value: <input type="text" id="myElement" value="Default"> //getting value from user

<button >Read Value using jQuery</button>

</body>
</html>

Beispielcode-Erklärung:

  1. Im obigen HTML-Code haben wir ein Eingabefeld erstellt, um den Wert vom Benutzer zu erhalten.
  2. Wir haben eine Schaltfläche zum Aufrufen der jQuery-Funktion erstellt.
  3. In <script>-Tags haben wir ein Click-Event auf den Button aufgerufen.
  4. Innerhalb dieses Klickereignisses haben wir den vom Benutzer angegebenen Textbereichswert gelesen und in einer Warnung angezeigt.
  5. Sie können die obige Quelle mit der Erweiterung .html speichern und sie in einem beliebigen Browser öffnen, um das Ergebnis zu sehen.

Verwandter Artikel - JavaScript Text