Mit javascript HTML textfeld auslesen?
Hallo,
Ich würde gerne aus einem textfeld (also type="text") den vom Benutzer eingegebenen Text auf der Website anzeigen. Ich weiß das man das mit einem Button machen kann aber ich will das es quasi "live" direkt auf der website geschrieben wird. Ist das möglich?
Danke schonmal im vorraus
5 Antworten
Ja.
Du baust einen Listener für das "submit"-Event des Formulars.
Im Eventlistener blockierst du das Standardverhalten, damit das Formular nicht abgeschickt wirst.
Dann holst du dir den Inhalt des Textfeldes wie von einem anderen Element auch. Oder du wandelst das Formular in FormData um:
https://codingnomads.com/javascript-access-form-values-formdata
Wenn du nicht auf einen Buttonklick warten möchtest sondern z.B. beim Tippen live Aktionen durchführen möchtest, dann würdest du einen Listener für das "change"-Event nutzen und evtl. mit dem Feld direkt statt über das Formular.
Weitere Möglichkeit:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
Den Sumbit-Listener fügst du beim Formular hinzu, nicht beim Textfeld.
Je nach Anwendungsfall möchtest du aber vielleicht nicht auf das Submit warten sondern auf ein anderes Event.
Zum Hinzufügen verwendest du die "addEventListener"-Funktion.
Ja, das ist auf jeden Fall möglich! Um den Text, den der Benutzer in ein Textfeld eingibt, "live" anzuzeigen, kannst du JavaScript verwenden, um auf die Eingabe des Textfeldes zu reagieren und den Text in einem anderen HTML-Element (wie einem
divoder
spananzuzeigen, ohne dass ein Button geklickt werden muss.
Hier ist ein einfaches Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Text Anzeige</title>
</head>
<body>
<h2>Gib etwas ein:</h2>
<input type="text" id="inputText" placeholder="Text eingeben...">
<p>Du hast eingegeben: <span id="outputText">Noch nichts...</span></p>
<script>
// Hole das Input-Feld und das Element, wo der Text angezeigt werden soll
const inputField = document.getElementById("inputText");
const outputText = document.getElementById("outputText");
// Event Listener für die Eingabe im Textfeld
inputField.addEventListener("input", function() {
// Aktualisiere den angezeigten Text in Echtzeit
outputText.textContent = inputField.value;
});
</script>
</body>
</html>
- Du hast ein Textfeld
input type="text"
und einen
span
der den Text anzeigen wird.
- Im JavaScript-Code wird ein Event Listener auf das Textfeld gesetzt, der auf das
input
-Ereignis reagiert. Jedes Mal, wenn der Benutzer eine Eingabe macht (also beim Tippen), wird der Inhalt des Textfeldes sofort im
span
Element angezeigt.
Erklärung:inputField.addEventListener("input", function() {...});- sorgt dafür, dass jedes Mal, wenn der Benutzer etwas in das Textfeld eingibt, die Funktion ausgeführt wird.
outputText.textContent = inputField.value;- sorgt dafür, dass der Text, den der Benutzer eingegeben hat, direkt unter dem Textfeld angezeigt wird.
Der Text wird sofort aktualisiert, während der Benutzer tippt, ohne dass ein Button oder eine zusätzliche Interaktion erforderlich ist!
Hi StarWars616,
das geht ganz einfach. Mit dem Document Object Model kurz DOM, können wir auf HTML-Elemente zugreifen, sie verändern, welche erstellen oder auch löschen.
Hier ein Skriptbeispiel in JavaScript:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mit DOM arbeiten</title>
<style>
#ausgabe {
display: flex;
flex-direction: column;
}
</style>
<script>
// Damit überprüfen wir ob alles geladen wurde, sonst gibt es manchmal Probleme in JavaScript ein HTML-Element zu finden
document.addEventListener('DOMContentLoaded', ()=>{
// Als erstes selektierem wir mit queryselector unsere Elemente mithilfe von CSS-Selektoren
let eingabe = document.querySelector("#eingabe");
let btn = document.querySelector("#btn");
let ausgabe = document.querySelector("#ausgabe");
// Jetzt fügen wir dem btn einen Eventhandler hinzu der auf Klicks reagiert
btn.addEventListener("click", ()=>{
// Hier wird ein p-Element erstellt und in newElem gespeichert
let newElem = document.createElement('p');
// Hier geben wir den p-Element als Textinhalt den Wert aus deiner Textbox
// Das geschieht mithilfe von textContent und value
newElem.textContent = eingabe.value;
// Jetzt fügen wir einfach das Element in das div-Element mit der ID ausgbe hinzu
// Dabei verwende ich die DOM-Methode appendChild, was dazu führt das es als letzte Element in den div-Element hinzugefügt wird
ausgabe.appendChild(newElem);
});
});
</script>
</head>
<body>
<input type="text" id="eingabe">
<button id="btn">Drück mich</button>
<div id="ausgabe">
</div>
</body>
</html>
Wenn du weitere Fragen dazu hast, dann darfs du gerne diese in gutefrage.net stellen. Viel Erfolg
Du kannst dich an das input-Event hängen.
Beispiel:
<input id="textfield">
<p id="current-input"></p>
<script>
const outputElement = document.getElementById("current-input");
document.getElementById("textfield").addEventListener("input", evt => {
outputElement.textContent = evt.currentTarget.value;
});
</script>
Sobald sich der Wert des Eingabefeldes ändert, wird auch der Textknoten unter dem Paragraph aktualisiert.
man kann machen dass man dem textfeld eine id gibt z.b. text und doch ein button einfügt weil ich nicht weiß wie das sonst gehen würde dann macht man eine funktion z.b. add
function add(){
document.body.innerHTML += '<br>' + text.value;
}
br wenn du es in eine neu zeile haben möchtest und dann machst du wieder in html in <button onclick='add()'>beispiel-tesxt</button>
Wie mache ich denn den submit listener in einem textfeld?