Thanks Robert,

I will read the articles

Cheers,

Claudio

> Claudio,=20

That will be a long explanation, if you didn't grasp the concepts/code
in my e-mail.
The basic thing is that the event is global in IE, as opposed to
Netscape, where=20
you have to pass it/access it with the function.

But to answer one question:

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

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

Yes, this is just an easy check to decide the current event model.


You need to do your homework about the event models. Here's some links
with good information.
I hope this helps!


Netscape 4:
http://www.javascriptkit.com/dhtmltutors/nsevents.shtml
http://webreference.com/js/column74/


W3C (which Netscape 6+, Mozilla, Phoenix etc is based on):
http://www.mozilla.org/docs/dom/domref/dom_event_ref.html
http://www.scottandrew.com/weblog/articles/events


Microsoft:
http://msdn.microsoft.com/workshop/author/om/event_model.asp



/Robert


-----Ursprungligt meddelande-----
Fr=E5n: Claudio Pallone [mailto:pallone@l...]=20
Skickat: den 6 november 2002 11:34
Till: JavaScript HowTo
=C4mne: [javascript_howto] Re: SV: RE: SV: Re: SV: Return Key/Enter Key
Event Handler part II


Hi Robert,

I was having a look at this code this morning to figure out how to deal=20
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=20
event.srcElemt to oElm. IS that right?=20

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

You sais that NS needs to pass the event in the handler using the=20
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=20
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=20
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=20
B> Netscape
4> , Netscape 6+ and IE.

> The main differences is that Netscape needs to pass the event in the
h> andler, i.e. onKeyDown=3D3D"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

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

> </head>
<> body>

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

>=20
<> /body>
<> /html>

>=20
S> OLUTION 2:

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

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

> </head>
<> body>

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

>=20
<> /body>
<> /html>

>=20
/> Robert

>=20

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

>=20
I>  just tried this (for fun). Works in IE version 6.0.2800.1106, but=20
I> 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=20
> a
s> mall syntax error in my code, as well as putting the returnValue at=20
s> the
w> rong place.

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

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

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

>=20
<> /body>
<> /html>

>=20
/> Robert

>=20

>=20
-> --

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

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


---

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

Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=3Dnosim/theprogramm=
e
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=3Dnosim/theprogramm=
e
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=3Dnosim/theprogramm=
e
r-20
---
Change your mail options at http://p2p.wrox.com/manager.asp or=20
to unsubscribe send a blank email to