Neues Input-Feld mit Enter

maclaim · 30. Apr. 2015

Hallo zusammen,

ich arbeite noch nicht so lange mit JavaScript. Ich setze mir zurzeit immer mal kleine Projekte als Ziel, damit ich langsam in die "Sprache" reinkomme.

Ich habe folgende Situation ich habe eine Input-Feld und wenn nach dem drücken der Enter-Taste soll darunter ein neues Input-Feld erstellt werden.

Bei dem ersten Feld funktioniert es einwandfrei nur bei den weiteren Feldern nicht mehr.

Hier ist mein Code:

Code:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
	<title>test - </title>

<script language="javascript" type="text/javascript"><!--
function test(f){

		var box1 = document.createElement('input');
		box1.type = 'text';
		box1.name = "test";
		box1.onkeypress="if (event.keyCode==13){  test(this.form); return false;}"
		f.appendChild(box1);
		box1.focus();
}
		
-->
</script>
           
</head>
<body>

<form>
Artikel: <input type=”text” name=”Artikel” ID="1"  onkeypress="if (event.keyCode==13){   test(this.form);return false;}"    ><br>
</form>
</body>
</html>

Für ein paar Tipps oder Lösungsvorschläge wäre ich sehr erfreut

Mit freundlichen Grüßen
Jannik

mikdoe · 30. Apr. 2015

Versuch mal bitte box1.onkeypress=function() { if (event.keyCode==13){ test(this.form); return false;} };

Und unten das Feld würde ich auch mit dem JS Code erzeugen indem du in einem script Block am Ende das Script direkt einmal aufrufst, sonst hast du es einmal redundant, sehr schlecht für die Wartung.

Für sowas hatte ich mir mal eine fertige Funktion mit Hilfe von kkapsner gebaut:

HTML:

function tastenpruefung(ev,aufruf) {
	var key = (ev.which) ? ev.which : ev.keyCode;
	if (key == 13) {
		if (ev.preventDefault){
			ev.preventDefault();	// verhindert das absenden eines umspannenden <form>
		}
		else {
			ev.returnValue = false;	// IE8
		}
		aufruf();
	}
}

Aufruf:

HTML:

var machwas = function() { alert('guckuck'); };
inputfeld.onkeypress = function(e) { var key = tastenpruefung(e || event,machwas); };

kkapsner · 30. Apr. 2015

Jaja... der "globale" Namespace in einem Eventlistener, der im HTML definiert ist, ist seltsam. test ist dort nach dem Erzeugen einfach nicht mehr die Funktion, sondern das neu erstellte <input>. Das musst du anders nennen oder den Eventlistener, wie man es auch machen sollte, nicht im HTML, sondern im JS setzen.

Code:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
	<title>test - </title>

<script>
function test(f){

		var box1 = document.createElement("input");
		box1.type = "text";
		box1.name = "Artikel";
		box1.onkeypress = function(event){if (event.keyCode==13){  test(this.form); return false;}};
		f.appendChild(box1);
		box1.focus();
}
</script>
           
</head>
<body>

<form>
Artikel: <input type="text" name="Artikel" ID="1"  onkeypress="if (event.keyCode==13){   test(this.form);return false;}"    ><br>
</form>
</body>
</html>

PS: Pass' mit den Anführungsstrichen auf - deine waren teilweise falsch. Du darfst auf keinen Fall HTML-Code in Word o.Ä. schreiben.

Neues Input-Feld mit Enter

maclaim

New member

mikdoe

Moderator

kkapsner

Super Moderator