p2p.wrox.com: Archives - javascript

javascript_howto thread: Re: SV: RE: SV: Re: SV: Return Key/Enter Key Event Handler part II
Message #1 by "Claudio Pallone" <pallone@l...> on Fri, 1 Nov 2002 10:18:27
Hi Robert,

I was having a look at this code this morning to figure out how to deal 
with different browsers and would like to ask you a favour. Could please 
elaborate a bit more on your explanation of how to pass the event.

here you are checking if the broswer is Netscape and if it is you assign 
Event.targe to oElm variable. If the browser is IE you assign 
event.srcElemt to oElm. IS that right? 

var oElm = (navigator.appName == "Netscape")? Event.target : 
event.srcElement;

You sais that NS needs to pass the event in the handler using the 
word "event". This is strange because I thought we had to pass "this" to 
mean this element on the page!!!

You also said that event is the global variable in IE for acessing an 
event'properties. Please could you explain that again since I am lost here.

This is the bit of your message I am finding difficult to understand:

"Hence the event is passed to the function, and (to save HTML code and
don't pass the element as well) it is checked in the function which 
element that triggered the function.

Please could explain that to me.

Cheers,

Claudio




> > Yep, the syntax (to be more precise, the event handling is different in
N> etscape).
B> ut here's the revised code, that will work in IE as well as Netscape
6> +.
B> elow the first solution is a second solution that will work in Netscape
4> , Netscape 6+ and IE.

> The main differences is that Netscape needs to pass the event in the
h> andler, i.e. onKeyDown=3D"EnterHandler(event)",
w> ith the word 'event', which incidentally is the global variable in IE
f> or acessing an event's properties.
H> ence the event is passed to the function, and (to save HTML code and
d> on't pass the element as well) it is
c> hecked in the function which element that triggered the function.

> From there on, it's pretty basic...   :-)

> SOLUTION 1:

> Using a custom attribute, named indexNo

> 
<> html>
<> head>
	> <title>Test</title>
<> script language=3D"Javascript">
	>   function EnterHandler(oEvent){
	>   	//var oEvent =3D (navigator.appName =3D=3D "Netscape")?
o> NSEvent : event;
	> 	var oElm =3D (navigator.appName =3D=3D "Netscape")?
o> Event.target : event.srcElement;
	> 	if(oEvent.keyCode =3D=3D 13){
	> 		var intNewIndexFocus =3D
p> arseInt(oElm.getAttribute("indexNo"), 10) + 1;
	> 		var arrInputFields =3D
d> ocument.getElementById("myform").getElementsByTagName("input");
	> 		for(var i=3D0; i<arrInputFields.length; i++){
	> 			var oInput =3D arrInputFields[i];
	> 			if(oInput.getAttribute("type") 
=> 3D=3D "text"
&> & parseInt(oInput.getAttribute("indexNo"), 10) =3D=3D =
i> ntNewIndexFocus){
	> 				oInput.focus();
	> 			}
	> 		}
	> 		(navigator.appName =3D=3D "Netscape")?
o> Event.preventDefault() : event.returnValue =3D false;
	> 	}
	> }
<> /script>

> </head>
<> body>

> <form id=3D"myform" name=3D"myform" action=3D"http://www.google.com">
	> <font size=3D"2">SurName</font><br>
	> <input name=3D"surname" type=3D"text" indexNo=3D"1"
o> nKeyDown=3D"EnterHandler(event)"><br>
	> <font size=3D"2">FirstName</font><br>
	> <input name=3D"firstname" type=3D"text" indexNo=3D"2"
o> nKeyDown=3D"EnterHandler(event)"><br>
	> <font size=3D"2">FirstName</font><br>
	> <input name=3D"firstname" type=3D"text" indexNo=3D"3"
o> nKeyDown=3D"EnterHandler(event)"><br>
	> <font size=3D"2">FirstName</font><br>
	> <input name=3D"firstname" type=3D"text" indexNo=3D"4"
o> nKeyDown=3D"EnterHandler(event)"><br>
	> <font size=3D"2">FirstName</font><br>
	> <input name=3D"firstname" type=3D"text" indexNo=3D"5"
o> nKeyDown=3D"EnterHandler(event)"><br>
<> /form>

> 
<> /body>
<> /html>

> 
S> OLUTION 2:

> In this solution, you don't need the attribute indexNo. But what you
n> eed is smart naming of=20
y> our input fields, with the desired indexNo at the end of every
e> lement's name.

> 
<> html>
<> head>
	> <title>Test for lists</title>
<> script language=3D"Javascript">
	>   function EnterHandler(oEvent){
	> 	var oElm =3D (navigator.appName =3D=3D "Netscape")?
o> Event.target : event.srcElement;
	> 	var intKey =3D (navigator.appName =3D=3D "Netscape" &&
p> arseInt(navigator.appVersion, 10) =3D=3D 4)? oEvent.which : =
o> Event.keyCode;
	> 	if(intKey =3D=3D 13){
	> 		var intIndexNo =3D
p> arseInt(oElm.name.match(/\d+$/)[0], 10) + 1;
	> 		//var intNewIndexFocus =3D
p> arseInt(oElm.getAttribute("indexNo"), 10) + 1;
	> 		//var arrInputFields =3D
d> ocument.getElementById("myform").getElementsByTagName("input");
	> 		var arrInputFields =3D
d> ocument.forms["myform"].elements;
	> 		for(var i=3D0; i<arrInputFields.length; i++){
	> 			var oInput =3D arrInputFields[i];
	> 			var intCurrInputNo =3D
p> arseInt(oInput.name.match(/\d+$/)[0], 10);
	> 			if(intCurrInputNo =3D=3D intIndexNo){
	> 				oInput.focus();
	> 			}
	> 			/*if(oInput.getAttribute("type") =3D=3D
"> text" && parseInt(oInput.getAttribute("indexNo"), 10) =3D=3D
i> ntNewIndexFocus){
	> 				oInput.focus();
	> 			}*/
	> 		}
	> 		if(navigator.appName =3D=3D "Netscape") return
f> alse;
	> 		else event.returnValue =3D false;
	> 	}
	> }
<> /script>

> </head>
<> body>

> <form id=3D"myform" name=3D"myform" action=3D"http://www.google.com">
	> <font size=3D"2">SurName</font><br>
	> <input name=3D"surname1" type=3D"text"
o> nKeyDown=3D"EnterHandler(event)"><br>
	> <font size=3D"2">FirstName</font><br>
	> <input name=3D"firstname2" type=3D"text"
o> nKeyDown=3D"EnterHandler(event)"><br>
	> <font size=3D"2">FirstName</font><br>
	> <input name=3D"firstname3" type=3D"text"
o> nKeyDown=3D"EnterHandler(event)"><br>
	> <font size=3D"2">FirstName</font><br>
	> <input name=3D"firstname4" type=3D"text"
o> nKeyDown=3D"EnterHandler(event)"><br>
	> <font size=3D"2">FirstName</font><br>
	> <input name=3D"firstname5" type=3D"text"
o> nKeyDown=3D"EnterHandler(event)"><br>
<> /form>

> 
<> /body>
<> /html>

> 
/> Robert

> 

> -----Ursprungligt meddelande-----
F> r=E5n: Shane Boyce [mailto:shane_b@g...]=20
S> kickat: den 31 oktober 2002 18:39
T> ill: JavaScript HowTo
=> C4mne: [javascript_howto] RE: SV: Re: SV: Return Key/Enter Key Event
H> andler part II

> 
I>  just tried this (for fun). Works in IE version 6.0.2800.1106, but does
n> othing in Netscape 7.0.

> I take it that the syntax for Netscape is completely different?

> Shane

> -----Original Message-----
F> rom: Robert Nyman [mailto:robert.nyman@c...]
S> ent: Wednesday, October 30, 2002 8:49 AM
T> o: JavaScript HowTo
S> ubject: [javascript_howto] SV: Re: SV: Return Key/Enter Key Event
H> andler part II

> Hi,

> First of all, I have to apologize to Kriz and you, Claudio. There was a
s> mall syntax error in my code, as well as putting the returnValue at the
w> rong place.

> But the code below has been tested by me, and it works like a charm! :-D

> <html>
<> head>
 >        <title>Test for lists</title>
<> script language=3D"Javascript">
 >          function EnterHandler(oElm) {
 >                if(event.keyCode =3D=3D 13){
 >                        var intNewIndexFocus =3D
p> arseInt(oElm.getAttribute("indexNo"), 10) + 1;
 >                        var arrInputFields =3D
d> ocument.getElementById("myform").getElementsByTagName("input");
 >                        for(var i=3D0; i<arrInputFields.length; i++){
 >                                var oInput =3D arrInputFields[i];
 >                                if(oInput.getAttribute("type") =3D=3D =
"> text"
&> & parseInt(oInput.getAttribute("indexNo"), 10) =3D=3D =
i> ntNewIndexFocus){
 >                                        oInput.focus();
 >                                }
 >                        }
 >                        event.returnValue =3D false;
 >                }
 >        }
<> /script>
<> /head>
<> body>

> 
<> form name=3D"myform">
 >        <font size=3D"2">SurName</font><br>
 >        <input name=3D"surname" type=3D"text" indexNo=3D"1"
o> nKeyDown=3D"EnterHandler(this)"><br>
 >        <font size=3D"2">FirstName</font><br>
 >        <input name=3D"firstname" type=3D"text" indexNo=3D"2"
o> nKeyDown=3D"EnterHandler(this)"><br>
 >        <font size=3D"2">FirstName</font><br>
 >        <input name=3D"firstname" type=3D"text" indexNo=3D"3"
o> nKeyDown=3D"EnterHandler(this)"><br>
 >        <font size=3D"2">FirstName</font><br>
 >        <input name=3D"firstname" type=3D"text" indexNo=3D"4"
o> nKeyDown=3D"EnterHandler(this)"><br>
 >        <font size=3D"2">FirstName</font><br>
 >        <input name=3D"firstname" type=3D"text" indexNo=3D"5"
o> nKeyDown=3D"EnterHandler(this)"><br>
<> /form>

> 
<> /body>
<> /html>

> 
/> Robert

> 

> 
-> --

> Improve your web design skills with these new books from Glasshaus.

> Usable Web Menus
h> 
ttp://www.amazon.com/exec/obidos/ASIN/1904151027/ref=3Dnosim/theprogramm=
e> 
r> -20
C> onstructing Accessible Web Sites
h> 
ttp://www.amazon.com/exec/obidos/ASIN/1904151000/ref=3Dnosim/theprogramm=
e> 
r> -20
P> ractical JavaScript for the Usable Web
h> 
ttp://www.amazon.com/exec/obidos/ASIN/1904151051/ref=3Dnosim/theprogramm=
e> 
r> -20
-> --
C> hange your mail options at http://p2p.wrox.com/manager.asp or=20
t> o unsubscribe send a blank email to
%> %email.unsub%%.
Return to Index
P2P Archives
