Submit-Event bei Formularen

DSB · 27.08.2006, 21:57

Hallo Javascriptler,

bei einigen Browsern führt das Drücken der Return-Taste in Inputfeldern dazu, dass das Formular direkt übertragen wird.
Weiß jemand wie ich das verhindern kann?

Es soll einfach nichts passieren wenn man Enter drückt.
Dabei soll in einer Textarea die Enter-Taste natürlich normal funktionieren.
Ich habe irgenwie keine Idee wo ich da ansetzen kann.

Malleus · 28.08.2006, 12:27

Meinst Du so etwas ?

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html>

<head>

<title>"RETURN" sendet kein "FORM"-Submit</title>

<script type="text/javascript">

function initPage()

{

    noReturn = true;

    document.myForm.myText.focus();

};



function check4Return(evt)

{

noReturn = ( evt.keyCode != 13 )

};



</script>



</head>



<body onload="initPage()">

<form name="myForm" action="test.php" onsubmit="return noReturn" onkeydown="check4Return(event)">

<input type="text" name="myText" >

<textarea name="myTextArea"></textarea>

</form>



</body>

</html>

tschau

Frank

DSB · 28.08.2006, 13:04

Hallo Frank,

danke für Dein Listing.
Ich möchte das aber mit etwas mehr Luxus verbinden und allgemeingültig machen. Bei der Lösung gefällt mir nicht, dass man bei jedem Inputfeld die Events angeben muss. das kann man doch sicherlich auch automatisieren.

Ich bin jetzt so weit, dass beim Start der Seite dynamisch jedem Input-Feld vom Typ Text und Password ein eigener Eventhandler zugewiesen wird.

In der aufgerufenen Funktion ist allerdings der Wert KeyCode immer "undefined".
Wie kann ich denn ermitteln welche Taste gedrückt wurde?

Code:

t=document.getElementsByTagName('input');
var anzahl_felder=t.length;
for (i=0;i<anzahl_felder;i++)
{
	if (t[i].type=="text" || t[i].type=="password")
	{
		if(document.addEventListener)
		{   //code für Mozilla
			t[i].addEventListener("keypress", submitonenter, false);
		}
		else
		{   //IE
			t[i].attachEvent("onkeypress", submitonenter);
		}
	}
}

//funktion die beim Druecken einer Taste im Inputfeld aufgerufen wird
function submitonenter(e)
{
 alert(e.type+' '+e.KeyCode);
 ... Jetzt pruefen, ob KeyCode den Wert 13 (Enter) hat.
}

DSB · 28.08.2006, 13:09

Oh mann, Javascript.

Das k von keyCode muss klein geschrieben werden.
Das wars - dann mal weiter im Text.

Und hier das fertige Script (getestet in FF1.5, IE 6 und Opera 8.52.
Man muss es einfach einmal nach dem oder den Formularen in den Quelltext einfügen. Es werden automatisch alle Inputfelder ermittelt und das automatische Absenden durch Drücken der Enter-Taste wird verhindert.

Code:

<script type="text/javascript" language="javascript">
t=document.getElementsByTagName('input');
var anzahl_felder=t.length;
for (i=0;i<anzahl_felder;i++)
{
	if (t[i].type=="text" || t[i].type=="password")
	{
		if(document.addEventListener)
		{   //non IE
			t[i].addEventListener("keypress", submitonenter, false);
		}
		else
		{   //IE
			t[i].attachEvent("onkeypress", submitonenter);
		}
	}
}

function submitonenter(e)
{
	if(typeof window.event!="undefined") e=window.event;//code for IE
	if(e.type=="keypress" && e.keyCode == 13)
	{
		if (typeof e.preventDefault != 'undefined') e.preventDefault();
		return false;
	}
}
</script>

DSB · 28.08.2006, 13:33

Jetzt wollte ih noch etwas mehr Luxus einbauen und erreichen, dass beim Drücken der Enter-Taste in das nächste Inputfeld gesprungen wird.
So funktioniert es leider nicht:

Code:

	if (e.keyCode==13) { e.keyCode=9;return true; }

Weiß jemand welchen Handler ich wie aufrufen muss, damit die Standardfunktion von Tab ausgeführt wird?

Malleus · 28.08.2006, 21:49

Hi,

Zitat:

Bei Deiner Lösung gefällt mir nicht, dass man bei jedem Inputfeld die Events angeben muss. das kann man doch sicherlich auch automatisieren.

Ich glaub', Du hast mein Script nicht richtig verstanden ;-)
Mein "onkeydown"-Event mußt Du nur ans FORM "attachen", nicht an alle INPUT-Controls.

Trotzdem hab' ich das Script noch etwas verändert. Hier ist eine neue Version, die auch TAB berücksichtigt.

Den "Keycode" des Events kannst Du nicht verändern: Stell' Dir mal vor, Du gibst "5" ein und intern werden 6 bestellt ;-)

Meine Lösung geht die Elemente des Formulars durch und springt dann auch den nächsten "geeigneten".

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html>

<head>

<title>"RETURN" sendet kein "FORM"-Submit und wird zu "TAB"</title>

<script type="text/javascript">

function initPage()

{

    document.myForm.myText1.focus();

};



function check4Return( evt )

{

    var obj = evt.target || evt.srcElement;

        

    if (obj.type == "submit")

        return true;

        

    if ( obj.type != "textarea" && evt.keyCode == 13 )

    {

        if ( evt.preventDefault )

            evt.preventDefault()

        else evt.returnValue = false;

        

        var myElements = document.myForm.elements,

        newIndex = 0;

        

        for (var i = 0; i < myElements.length; i++ )

        if ( myElements[ i ] == obj )

        {

            for (var j = i + 1; j < myElements.length; j++ )

                if ( "input,textarea,submit".indexOf( myElements[ j ].type ) != -1 )

                {

                    newIndex = j;

                    break;

                };

            myElements[ newIndex ].focus();

        };

    };

    

    return true;

};



</script>



</head>



<body onload="initPage()">

<form name="myForm" action="disableFormReturn.html" onkeypress="check4Return(event)">

<input type="text" name="myText1" ><br>

<input type="text" name="myText2" ><br>

<textarea name="myTextArea"></textarea><br>

<input type="text" name="myText3" >

<br>

<input type="submit"/>

</form>



</body>

</html>

Jetzt noch etwas zu Deinem Scriptinclude:

Zitat:

Man muss es einfach einmal nach dem oder den Formularen in den Quelltext einfügen.

Dieses Einbetten von Script direkt in den HTML-Bereich find' ich eigentlich nicht so toll. Oft paßt man hier nicht auf und man greift auf Objekte zu, die noch nicht richtig "geparsed" wurden. Verwende besser am "BODY"-Element ein "onload"-Event, das z.B. eine Funktion "initPage" aufruft, in der dann "alles" erledigt wird.

Tschau

Frank

DSB · 28.08.2006, 22:02

Hallo Frank,

Zitat:

Zitat von Malleus

Ich glaub', Du hast mein Script nicht richtig verstanden ;-)
Mein "onkeydown"-Event mußt Du nur ans FORM "attachen", nicht an alle INPUT-Controls.

Ups, wie recht Du hast.
Da habe ich nicht richtig geguckt.
Ich gelobe trotz meiner regelmäßigen JS-Aufgeregtheit nächstes Mal genauer hinzugucken.

Zitat:

Trotzdem hab' ich das Script noch etwas verändert. Hier ist eine neue Version, die auch TAB berücksichtigt.

Super!
Vielen herzlichen Dank für Deine Lösung.
Das "Problem" taucht auch recht häufig bei Google auf. Mach Dich also auf entsprechenden Zulauf gefasst.

Zitat:

Jetzt noch etwas zu Deinem Scriptinclude:

Dieses Einbetten von Script direkt in den HTML-Bereich find' ich eigentlich nicht so toll. Oft paßt man hier nicht auf und man greift auf Objekte zu, die noch nicht richtig "geparsed" wurden. Verwende besser am "BODY"-Element ein "onload"-Event, das z.B. eine Funktion "initPage" aufruft, in der dann "alles" erledigt wird.

Danke sehr.
Da ich nicht so der Javascript-Freak bin, nehme ich den Tipp dankend an.
Das Script soll allerdings in eine Forensoftware integriert werden, wo der Body-Tag nicht im Zugriff steht, da er in einer anderen Templatedatei definiert wird.
Meinst Du, man kann davon ausgehen dass die Hauptseite geladen ist wenn man das Script extern auslagert?

Auf die Idee mit dem Focus statt Tab-Event bin ich gar nicht gekommen.
Klasse gelöst.

Edit2: Man lernt doch nie aus. Ich hätte nicht gedacht, dass man ein onkeypress-Event an ein Formular knüpfen kann und sich dieses dann automatisch auch auf alle Kindelemente auswirkt. Eigentlich mag ich JS nicht. Aber je mehr ich mich damit beschäftige, umso klarer wird mir wie mächtig das sein kann.

Stuck Mojo · 29.08.2006, 00:19

Zitat:

Zitat von Malleus

Den "Keycode" des Events kannst Du nicht verändern: Stell' Dir mal vor, Du gibst "5" ein und intern werden 6 bestellt ;-)

Also der IE kann das tatsächlich! Dort ist die property read/write. Ich habe das einmal für ein ähnliches Verhalten genutzt (also Enter2Tab und ich meine auch dass ich die Pfeiltasten in Tabs und Shift-Tabs "gedreht" hatte). Des Weitere habe ich dieses "Feature" dazu genutzt um auf dem NUM-Block den Punkt in ein Komma zu wandeln - zwecks Eingabe von Kommazahlen (oder wars andersherum? ...hab gerade nur ne Notitastatur da

) Das klappt also definitv (im IE zumindest

)

Gruß
Jan

steffenk · 29.08.2006, 00:55

Daniel - das onload muss ja nicht im body-tag stehen, es reicht ja auch ein
window.onload
im JS-Bereich

DSB · 29.08.2006, 01:00

Ah, gute Idee.
Danke Steffen.

Malleus · 29.08.2006, 23:11

Hi,
Steffens Vorschlag

Zitat:

Zitat von St@eff.en

Daniel - das onload muss ja nicht im body-tag stehen, es reicht ja auch ein
window.onload
im JS-Bereich

kann "gefährlich" sein: Ihr überschreibst damit einen vielleicht existierende "onload"-Event Handler.
Besser wäre es, "addEventListener" bzw. "attachEvent" (MSIE) aufzurufen: Damit wird ein zusätzlicher Eventhandler hinzugefügt.

Hier hab' ich mal etwas vorbereitet ;-)

PHP-Code:


			
<html>

<head>

<title>Zwei Window Onloads</title>

<script type="text/javascript">

function initPage()

{

    document.getElementById( "myDiv" ).innerHTML+="Text aus der HTML-Seite<br>";

};

</script>

<script type="text/javascript" src="twoWindowOnLoads.js"></script>

</head>



<body onload="initPage()">

<div id="myDiv"></div>

</body>

</html>

JS-Datei: twoWindowOnLoads.js

PHP-Code:


			
if ( window.addEventListener )

    window.addEventListener( "load" , doIt , true );

else if ( window.attachEvent )

    window.attachEvent( "onload" , doIt );



function doIt()

{

    document.getElementById("myDiv").innerHTML += "Text aus der JS-Seite<br>";

}

Wenn Du ( Ihr ) window.load benutzt, wird nur ein Text ausgegeben.

@Stuck Mojo: Ich hab' dieses MSIE-Feature damals mißbraucht, um "," in "." umzuwandeln ;-)

@DSB:

Zitat:

Edit2: Man lernt doch nie aus. Ich hätte nicht gedacht, dass man ein onkeypress-Event an ein Formular knüpfen kann und sich dieses dann automatisch auch auf alle Kindelemente auswirkt.

Dieses Verhalten ist auch bei vielen anderen Events (onmousedown,onmouseup, usw) so und nennt sich "Bubbeln", d.h. es wird überprüft, ob das Element, das den Event feuert einen entsprechenden Eventhandler besitzt. Wenn ja, wird dieser ausgeführt. Je nach Ausgang dieser Routine wird überprüft, ob das Elternelement auch einen solchen Eventhandler besitzt und er wird ausgeführt. Dies geschieht bis das window-Element erreicht wird oder "irgendwo" in der Reihe das Bubbln gecanceld ( event.cancelBubble=true) wird.
...Das war jetzt nur die Kurzfassung ;-) Mehr und vor allem genauere Infos gibt's hier
Danny Goodman: Dynamic HTML: The Definitive Reference.

Übrigens das Buch meiner Wahl bzgl. Crossbrowser-Programmierung!

tschau

Frank

meyerzwo · 30.08.2006, 09:09

Hallo,
ich finde dieses Script sehr sinnvoll um Funktionen aufzurufen.
Es ist klein, universell einsetzbar und funktioniert in jedem Browser.