javascript_howto thread: SV: RE: SV: Re: SV: Return Key/Enter Key Event Handler part II
Yep, the syntax (to be more precise, the event handling is different in
Netscape).
But here's the revised code, that will work in IE as well as Netscape
6+.
Below 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
handler, i.e. onKeyDown=3D"EnterHandler(event)",
with the word 'event', which incidentally is the global variable in IE
for acessing an event's properties.
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.
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")?
oNSEvent : event;
var oElm =3D (navigator.appName =3D=3D "Netscape")?
oEvent.target : event.srcElement;
if(oEvent.keyCode =3D=3D 13){
var intNewIndexFocus =3D
parseInt(oElm.getAttribute("indexNo"), 10) + 1;
var arrInputFields =3D
document.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
intNewIndexFocus){
oInput.focus();
}
}
(navigator.appName =3D=3D "Netscape")?
oEvent.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"
onKeyDown=3D"EnterHandler(event)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname" type=3D"text" indexNo=3D"2"
onKeyDown=3D"EnterHandler(event)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname" type=3D"text" indexNo=3D"3"
onKeyDown=3D"EnterHandler(event)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname" type=3D"text" indexNo=3D"4"
onKeyDown=3D"EnterHandler(event)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname" type=3D"text" indexNo=3D"5"
onKeyDown=3D"EnterHandler(event)"><br>
</form>
</body>
</html>
SOLUTION 2:
In this solution, you don't need the attribute indexNo. But what you
need is smart naming of
your input fields, with the desired indexNo at the end of every
element's name.
<html>
<head>
<title>Test for lists</title>
<script language=3D"Javascript">
function EnterHandler(oEvent){
var oElm =3D (navigator.appName =3D=3D "Netscape")?
oEvent.target : event.srcElement;
var intKey =3D (navigator.appName =3D=3D "Netscape" &&
parseInt(navigator.appVersion, 10) =3D=3D 4)? oEvent.which :
oEvent.keyCode;
if(intKey =3D=3D 13){
var intIndexNo =3D
parseInt(oElm.name.match(/\d+$/)[0], 10) + 1;
//var intNewIndexFocus =3D
parseInt(oElm.getAttribute("indexNo"), 10) + 1;
//var arrInputFields =3D
document.getElementById("myform").getElementsByTagName("input");
var arrInputFields =3D
document.forms["myform"].elements;
for(var i=3D0; i<arrInputFields.length; i++){
var oInput =3D arrInputFields[i];
var intCurrInputNo =3D
parseInt(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
intNewIndexFocus){
oInput.focus();
}*/
}
if(navigator.appName =3D=3D "Netscape") return
false;
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"
onKeyDown=3D"EnterHandler(event)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname2" type=3D"text"
onKeyDown=3D"EnterHandler(event)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname3" type=3D"text"
onKeyDown=3D"EnterHandler(event)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname4" type=3D"text"
onKeyDown=3D"EnterHandler(event)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname5" type=3D"text"
onKeyDown=3D"EnterHandler(event)"><br>
</form>
</body>
</html>
/Robert
-----Ursprungligt meddelande-----
Fr=E5n: Shane Boyce [mailto:shane_b@g...]
Skickat: den 31 oktober 2002 18:39
Till: JavaScript HowTo
=C4mne: [javascript_howto] RE: SV: Re: SV: Return Key/Enter Key Event
Handler part II
I just tried this (for fun). Works in IE version 6.0.2800.1106, but does
nothing in Netscape 7.0.
I take it that the syntax for Netscape is completely different?
Shane
-----Original Message-----
From: Robert Nyman [mailto:robert.nyman@c...]
Sent: Wednesday, October 30, 2002 8:49 AM
To: JavaScript HowTo
Subject: [javascript_howto] SV: Re: SV: Return Key/Enter Key Event
Handler part II
Hi,
First of all, I have to apologize to Kriz and you, Claudio. There was a
small syntax error in my code, as well as putting the returnValue at the
wrong 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
parseInt(oElm.getAttribute("indexNo"), 10) + 1;
var arrInputFields =3D
document.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
intNewIndexFocus){
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"
onKeyDown=3D"EnterHandler(this)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname" type=3D"text" indexNo=3D"2"
onKeyDown=3D"EnterHandler(this)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname" type=3D"text" indexNo=3D"3"
onKeyDown=3D"EnterHandler(this)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname" type=3D"text" indexNo=3D"4"
onKeyDown=3D"EnterHandler(this)"><br>
<font size=3D"2">FirstName</font><br>
<input name=3D"firstname" type=3D"text" indexNo=3D"5"
onKeyDown=3D"EnterHandler(this)"><br>
</form>
</body>
</html>
/Robert
---
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
View Cart
