JavaScript-Textfelder
- Erstellen Sie ein Textfeld mit HTML
- Erstellen Sie ein Textfeld mit JavaScript
- Erstellen Sie mehrere Textfelder mit JavaScript
- Abschluss
Wir können viele Skriptsprachen in der Webentwicklung auswählen und verwenden, aber JavaScript ist eine der besten Skriptsprachen, die wir verwenden können.
JavaScript macht Webseiten interaktiv und dynamisch, und normalerweise verwenden Programmierer und Entwickler es zusammen mit Auszeichnungssprachen wie HTML (HyperText Markup Language), XHTML (Extensible HyperText Markup Language) und Stylesheet-Sprachen wie CSS (Cascading Style Sheets).
Ein Textfeld ist ein entscheidendes Merkmal, das wir in vielen Programmen wie Webbrowsern, E-Mail-Clients usw. sehen können. Einfach ausgedrückt ist ein Textfeld ein grafischer Bereich, in den Benutzer Text eingeben können, der hauptsächlich verwendet wird, um Eingaben vom Benutzer zu erhalten .
Normalerweise können wir Textfelder mit HTML erstellen, aber wir können sie auch mit JavaScript erstellen. In diesem Artikel erörtern wir, wie Sie mithilfe von HTML Textfelder mit JavaScript erstellen.
Bevor wir Textfelder mit JavaScript erstellen, sehen wir uns an, wie wir ein einfaches Textfeld mit HTML erstellen können.
Erstellen Sie ein Textfeld mit HTML
Wir können Textfelder in HTML mit dem Tag <input> erstellen. Als Attribut geben wir type und als Wert text an.
Die Syntax zum Erstellen eines Textfelds ist unten.
<input type = "text">
Mal sehen, wie wir mit dem obigen Code-Snippet ein Textfeld erstellen können. Siehe den folgenden Code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML text box</title>
</head>
<body>
<input type="text", placeholder="type something..">
</body>
</html>
Das obige Code-Snippet ist ein einfacher Code-Chunk, der ein einfaches Textfeld mit dem <input>-Tag erstellt. Um es genauer zu sehen, haben wir das Attribut Platzhalter mit einigen Wörtern als Wert hinzugefügt.
Es wird uns die folgende Ausgabe geben.
Wie oben gezeigt, erhalten wir wie erwartet ein einfaches Textfeld.
Erstellen Sie ein Textfeld mit JavaScript
Anstatt HTML zu verwenden, können wir JavaScript verwenden, um ein Textfeld zu erstellen. Unten sind die drei Schritte, die wir befolgen werden, um dies zu erreichen.
-
Erstellen Sie das Eingabeelement mit der Funktion
createElement()und weisen Sie es einer Variablen zu. -
Legen Sie als Attribut
typeund als Wert des Eingabeelementstextfest. -
Fügen Sie das Element
inputinnerhalb des Tags<body>hinzu.
Lassen Sie uns den Code für die obigen Schritte erstellen.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>JavaScript text box</title>
</head>
<body>
<script>
const textBox = document.createElement("input");
textBox.setAttribute("type", "text");
document.body.appendChild(textBox);
</script>
</body>
</html>
Im obigen Code haben wir die zuvor erwähnten drei Schritte in einen Code-Chunk umgewandelt. Innerhalb des <body>-Tags haben wir die createElement()-Funktion verwendet, um ein input-Element zu erstellen und diese Funktion einer Variablen namens textbox zuzuweisen.
Dann setzen wir den Typ als Attribut und text als Wert der neu deklarierten Variablen. Anschließend haben wir die Variable textbox (Element input) an das Tag <body> angehängt.
Wenn wir nun den implementierten Code ausführen, erhalten wir wie zuvor ein einfaches Textfeld. Siehe die folgende Ausgabe.
Erstellen Sie mehrere Textfelder mit JavaScript
Es gibt einige Fälle, in denen wir mehr als ein Textfeld erstellen müssen. Manchmal fügen wir einem Formular einen Abschnitt hinzu, um das Geburtsdatum eines bestimmten Benutzers zu erhalten.
In solchen Situationen möchten Entwickler das Datum, den Monat und das Jahr separat erhalten. Dafür verwenden sie mehrere Textfelder.
Es gibt mehrere Möglichkeiten, mehr als ein Textfeld zu erstellen; Der einfachste Weg ist die Verwendung einer for-Schleife. Mal sehen, wie wir mehrere Textfelder mit einer for-Schleife erstellen können.
Zuerst erstellen wir ein <div>-Tag und darin die Textfelder. Außerdem geben wir dem <div>-Tag wie folgt eine ID.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>JavaScript multiple text boxes</title>
</head>
<body>
<div id="textBoxes"> </div>
<script src="main.js"></script>
</body>
</html>
Als nächstes können wir den JavaScript-Code implementieren. Wir können es in eine separate Datei oder als Inline-JavaScript-Code schreiben.
Für dieses Beispiel implementieren wir eine separate JavaScript-Datei. Siehe den folgenden Code.
function createTextBoxes(number) {
var string = '';
var i;
for (i = 0; i < number; i++) {
string += '<input type = "text" placeholder = "type something..">';
}
document.getElementById('textBoxes').innerHTML = string;
}
createTextBoxes(4);
Im obigen Code-Chunk haben wir eine Funktion namens createTextBoxes gebaut und die number als Parameter angegeben. Die Anzahl ist die Anzahl der Textfelder, die wir benötigen.
Dann haben wir als String einen leeren string und als Iterator i angegeben. Unterhalb dieser Anweisung haben wir eine for-Schleife verwendet, die iteriert, bis sie den Wert des number-Parameters erreicht.
Dann haben wir innerhalb der for-Schleife ein Textfeld mit dem <input>-Tag erstellt. Wir haben das Attribut type zusammen mit dem Wert text angegeben, um es als Textfeld und ein Attribut placeholder zusammen mit etwas Text zu identifizieren.
Danach ordnen wir es anhand seiner ID der entsprechenden Komponente im HTML-Tag <body> zu.
Schließlich haben wir die Funktion aufgerufen, indem wir der Funktion createTextBoxes() als Parameter 4 übergeben haben.
Nachdem wir den Code ausgeführt haben, wird das folgende Ergebnis ausgegeben.
Wie Sie sehen können, haben wir vier Textfelder mit den von uns angegebenen Platzhaltern erhalten.
Abschluss
In diesem Artikel haben wir besprochen, was ein Textfeld ist und warum wir es brauchen. Außerdem haben wir gelernt, ein Textfeld mit JavaScript und HTML zu erstellen.
Zuerst haben wir ein einfaches Textfeld mit JavaScript erstellt und dann anhand eines Beispiels gezeigt, wie Sie mehrere Textfelder mit einer for-Schleife erstellen.
Es gibt weitere Methoden zum Erstellen von Textfeldern mit JavaScript, aber die oben besprochenen Methoden sind die einfachsten und einfachsten Wege, um das Ziel zu erreichen.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.