Bei Input-Eingabe durch "Enter" Funktion auslösen

[Leonard]

Hallöle,

Wollte durch eine weitere kleinere Spielerei mehr von JavaScript lernen, doch verstehe ich es anscheinend doch noch nicht so gut wie ich dachte...

Ich wollte durch eine Eingabe in ein Input-Feld eine Seite aufrufen.
Klappt auch alles ziemlich gut, doch eben nur wenn man mit dem Cursor auf den Enter-BUTTON klickt. Ich möchte aber, dass es auch mit dem drücken der Enter-Taste funktioniert.

Hier die einzelnen Codes:
HTML:

<form id="passwd">  
<input id="passwd2" style="text-transform: uppercase" type="text" char="#" maxlength="30" selected="selected"><input type="button" id="passwdenter" onclick="redirectToPage();" value="Enter">  
</form>

Kann man diese onclick-Geschichte mit Enter erreichen?

Und hier das JavaScript (der erste Teil ist vielleicht irrelevant, weil er sich nur darauf bezieht, dass das Input-Feld bei Seitenaufruf aktiv ist):

function cUpper(cObj)  
 {  
 cObj.value=cObj.value.toUpperCase();  
 }  
  
  
function redirectToPage()  
{  
	switch(document.getElementById("passwd2").value)  
	{  
		case '1':  
			window.location = "http://www.google.de/";  
			break;  
		case '2':  
			window.location = "http://www.web.de/";  
			break;  
	}  
}

Kann mir einer weiterhelfen?

[Klawischnigg]

Hi there,

Wollte durch eine weitere kleinere Spielerei mehr von JavaScript lernen, doch verstehe ich es anscheinend doch noch nicht so gut wie ich dachte...

Ich wollte durch eine Eingabe in ein Input-Feld eine Seite aufrufen.
Klappt auch alles ziemlich gut, doch eben nur wenn man mit dem Cursor auf den Enter-BUTTON klickt. Ich möchte aber, dass es auch mit dem drücken der Enter-Taste funktioniert.

Das Problem bei Deinem Beispiel ist, daß durch Drücken der Enter-Taste der Fokus trotzdem auf dem input-Element bleibt. Wenn Du mit der Tabulatortaste weitergehst, dann kannst Du auch mit der Enter-Taste den Eventhandler onclick auf dem Button-Element auslösen.
Wenn Du wirklich mit der Enter-Taste das input-Feld abschicken möchtest, dann musst Du den Eventhandler onkeyup auf das input-Element legen. Also zB: <input [...blabla...] onkeyup="checkTaste()">
Dann brauchst Du noch eine Javascript-Funktion von der Art:

  
function checkTaste(e)  
{  
	if (! e)  
	{  
		e = window.event;  
	}  
	if (e.keyCode) == 13 // nur das interessiert uns hier...  
        {  
            redirectToPage();  
        }  
  
}  
  
  

[Der Martin]

Hi,

Ich möchte aber, dass es auch mit dem drücken der Enter-Taste funktioniert.
Das Problem bei Deinem Beispiel ist, daß durch Drücken der Enter-Taste der Fokus trotzdem auf dem input-Element bleibt. Wenn Du mit der Tabulatortaste weitergehst, dann kannst Du auch mit der Enter-Taste den Eventhandler onclick auf dem Button-Element auslösen.
Wenn Du wirklich mit der Enter-Taste das input-Feld abschicken möchtest, dann musst Du den Eventhandler onkeyup auf das input-Element legen. Also zB: <input [...blabla...] onkeyup="checkTaste()">

das erscheint mir viel zu umständlich. Das Naheliegende ist doch, dem form-Element auch ein action-Attribut zu geben (das zur Not auch eine Pseudo-URL mit "javascript:" sein kann), und den Button dann auch tatsächlich als submit-Button zu deklarieren.

So long,
 Martin

[Klawischnigg]

Hi there,

das erscheint mir viel zu umständlich. Das Naheliegende ist doch, dem form-Element auch ein action-Attribut zu geben (das zur Not auch eine Pseudo-URL mit "javascript:" sein kann), und den Button dann auch tatsächlich als submit-Button zu deklarieren.

Ja eh, aber wir wissen ja nicht, was er sonst noch so vor hat. Ich wollt' ihm ja vor allem zeigen, warum sein ENTER im input-Feld nichts bewirkt...

[Gunnar Bittersmann]

@@Klawischnigg:

nuqneH

Ich wollt' ihm ja vor allem zeigen, warum sein ENTER im input-Feld nichts bewirkt...

Eben das hat Der Martin getan: Es bewirkt nichts, weil das Formular weder action-Attribut noch Submit-Button hat.

Und es ist unsinnig, in HTML vorgesehene und in jedem Browser vorhandene Funktionalität durch JavaScript nachzubauen.

Qapla'

[Leonard]

Hallöle

das erscheint mir viel zu umständlich. Das Naheliegende ist doch, dem form-Element auch ein action-Attribut zu geben (das zur Not auch eine Pseudo-URL mit "javascript:" sein kann), und den Button dann auch tatsächlich als submit-Button zu deklarieren.

Das muss aber anscheinend ein type="button" sein, denn wenn ich es umwandle in ein type="submit" funktioniert die Funktion nichtmehr.

gruß Leonard

[Steel]

Moin!

Das muss aber anscheinend ein type="button" sein, denn wenn ich es umwandle in ein type="submit" funktioniert die Funktion nichtmehr.

Nö. Du hasts dann mit an Sicherheit grenzender Wahrscheinlichkeit nur falsch umgesetzt. Was genau Du gemacht hast, weiß ich natürlich nicht und kann deshalb auch nicht wirklich was dazu sagen. Die Möglichkeiten sind zahlreich und ich werd jetzt nicht wild drauflos raten.

[molily]

Hallo!

kleine Ergänzung:

<input [...blabla...] onkeyup="checkTaste()">

Wenn schon Inline-Event-Handler, dann sollte auch das Event-Objekt übergeben werden:

onkeyup="checkTaste(event)"

function checkTaste(e)
{
if (! e)
{
e = window.event;
}

… sonst ist e hier immer falsy und es wird versucht, window.event abzufragen. Dieses Microsoft-Verhalten haben m.W. nicht alle Browser nachgebaut.

Mathias