Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Assigning keyCode a value in a document containing a form

Reply
Thread Tools

Assigning keyCode a value in a document containing a form

 
 
WilliamRLinden@gmail.com
Guest
Posts: n/a
 
      03-07-2006
Hi world! we are pretty new to JavaScript and have been
struggling for now 2 days on this problem ... We would
appreciate mercy if anyone can give us some.

Basically we are trying to simulate the tab key when the
down arrow key is pressed. (we know there are other way
to control focus flow but we use a lot of dynamic jsp fields,
that will make the flow control a nightmare, we just want
basic tabbing from the arrow key)

1)We are able to capture a onkeydown event and reasign it with another
key value with no problem within an html document without a form.

example:

var ieKey = event.keyCode;

if (ieKey == 40) {
event.keyCode = 9;
}



however as soon as we insert a form tag in the document, this stops
functioning.
The asignment seems to be fine as an alert clearly shows, but the
instruction
seems to be ignored.

Find below the working (with no form) and non working script (with a
form).
You should be able to just cut and paste the code.


Without form (works)
=============
<html>
<head>

<title>arrow keys test 2</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">


<script>

function onLoadInit(){
document.onkeydown = keyDown;
}



function keyDown(e) {

var ieKey = event.keyCode;

if (ieKey == 3 {

alert("up arrow");
}



if (ieKey == 40) {

alert("down arrow");
event.keyCode = 9;
alert(event.keyCode);
}
}

</script>
</head>



<body onload="onLoadInit()" >



<center>
<strong><font size="+2">no form good</font></strong>
</center>


<BR> <input name="A" type="text" size="6">
<BR> <input name="B" type="text" size="6">
<BR> <input name="D" type="text" size="6">
<BR> <input name="E" type="text" size="6">
<BR> <input name="F" type="text" size="6">


<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>



</body>
</html>





With form (doesn't work)
==========


<html>
<head>

<title>arrow keys test 2</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">


<script>

function onLoadInit(){
document.onkeydown = keyDown;
}



function keyDown(e) {

var ieKey = event.keyCode;

if (ieKey == 3 {

alert("up arrow");
}



if (ieKey == 40) {

alert("down arrow");
event.keyCode = 9;
alert(event.keyCode);
}
}

</script>
</head>



<body onload="onLoadInit()" >

<form name="form1" method="get">


<center>
<strong><font size="+2">arrows 5</font></strong>
</center>


<BR> <input name="A" type="text" size="6">
<BR> <input name="B" type="text" size="6">
<BR> <input name="D" type="text" size="6">
<BR> <input name="E" type="text" size="6">
<BR> <input name="F" type="text" size="6">


<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>

</form>


</body>
</html>

 
Reply With Quote
 
 
 
 
Jonas Raoni
Guest
Posts: n/a
 
      03-07-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> Basically we are trying to simulate the tab key when the
> down arrow key is pressed. (we know there are other way
> to control focus flow but we use a lot of dynamic jsp fields,
> that will make the flow control a nightmare, we just want
> basic tabbing from the arrow key)
>
> event.keyCode = 9;


If nothing changed, this works just on IE, so find another way, take a
look here: <URL:http://jsfromhell.com/forms/auto-tab>, with a little
modification, it will work for you.


--
Jonas Raoni Soares Silva
http://www.jsfromhell.com
 
Reply With Quote
 
 
 
 
Jonas Raoni
Guest
Posts: n/a
 
      03-07-2006
Jonas Raoni wrote:
> (E-Mail Removed) wrote:
> > Basically we are trying to simulate the tab key when the
> > down arrow key is pressed.

>
> If nothing changed, this works just on IE, so find another way, take a
> look here: <URL:http://jsfromhell.com/forms/auto-tab>, with a little
> modification, it will work for you.


Sorry, I've posted the wrong url ^^

<URL:http://jsfromhell.com/forms/enter-as-tab>


--
Jonas Raoni Soares Silva
http://www.jsfromhell.com

 
Reply With Quote
 
SirWilliam
Guest
Posts: n/a
 
      03-09-2006
Thanks Jonas.

I had a look the at URL mentioned, pretty close to what we needed but
didn't realy shed any light on why our script didn't work when using a
form.

Now, just in case this might one day help some one else, here is how we
finally solved the problem:

The true purpose of us needing the script was to capture arrow key
presses and then to use these to navigate between the elements on a web
page, instead of using the tab and shift+tab key to tediously navigate
from element to element in the specified tab order.

In the end I changed the approach completely and instead of simulating
tab key presses I created a virtual grid with each element (html tag)
to be navigated to/from containing X and Y coordinates as two
additional parameters in the tag declaration. Then when an arrow key
event is captured I simply focus directly on the next element using the
coordinate system to identify which tag should receive the focus next.


************************************************** *************
Here is the JavaScript (I used a file called arrowNav.js)

************************************************** *************

var Xval,Yval,xMaxArray;
var yMax = 0;


function setXY() {

Xval = document.activeElement.x;
Yval = document.activeElement.y;
}



function getMax() {

//Work Out maximum Y
//------------------
for (var i=0;i < document.all.length;i++) {
if (document.all[i].y > yMax) {
yMax = document.all[i].y;
}
}

xMaxArray = new Array(yMax+1);
for (var i=0;i<(yMax+1);i++)
xMaxArray[i] = 0;


//Work Out maximum X's
//--------------------
for (var i=0;i < document.all.length;i++) {
if (document.all[i].x > xMaxArray[document.all[i].y]) {
xMaxArray[document.all[i].y] = document.all[i].x;
}
}

}



function handleKey(evt) {

var ieKey;

//if (window.Event) ieKey = evt.which;
//else ieKey = event.keyCode;

ieKey = event.keyCode;


//Move Up
//-------
if (ieKey == 3 {

// Make sure we or not as high as we can go
//-----------------------------------------
if (Yval > 1) {
Yval--;

// If we are moving to a row with less elements i.e less X
coordinates
// make sure we re-adjust x grid value to reflect the max for that
row
//---------------------------------------------------------------------
if (Xval > xMaxArray[Yval]) {
Xval = xMaxArray[Yval];
}

for (var i=0;i < document.all.length;i++)
if ((document.all[i].x == Xval) && (document.all[i].y ==
Yval)) {
//alert(document.all[i].name)
document.all[i].focus();
}
}
}


//Move Down
//---------
if (ieKey == 40) {

// Make sure we or not as low as we can go
//-----------------------------------------
if (Yval < yMax) {
Yval++;


// If we are moving to a row with less elements i.e less X
coordinates
// make sure we re-adjust x grid value to reflect the max for that
row
//---------------------------------------------------------------------
if (Xval > xMaxArray[Yval]) {
Xval = xMaxArray[Yval];
}

for (var i=0;i < document.all.length;i++)
if ((document.all[i].x == Xval) && (document.all[i].y ==
Yval)) {
//alert(document.all[i].name)
document.all[i].focus();
}
}
}

//Move Right
//----------
if (ieKey == 39) {

//alert(document.all['T1'].type);


if (!((document.activeElement.type == "text") &&
(document.activeElement.value != ""))) {

// Make sure we or not as far right as we can go
//----------------------------------------------
if(Xval < xMaxArray[Yval]) {
Xval++;

for (var i=0;i < document.all.length;i++)
if ((document.all[i].x == Xval) && (document.all[i].y ==
Yval)) {
//alert(document.all[i].name)
document.all[i].focus();
}
}
}
}



//Move Left
//---------
if (ieKey == 37) {


if (!((document.activeElement.type == "text") &&
(document.activeElement.value != ""))) {

// Make sure we or not as far left as we can go
//---------------------------------------------
if (Xval > 1) {
Xval--;

for (var i=0;i < document.all.length;i++)
if ((document.all[i].x == Xval) && (document.all[i].y ==
Yval)) {
//alert(document.all[i].name)
document.all[i].focus();
}
}
}
}

return fals;
}

// Add main document event Listener
document.onkeydown=handleKey;








**************************************************
AN HTML FILE USING THE SCRIPT

**************************************************

<html>
<head>

<title>God damn Arrows</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">


<!-- Specify arrowNav.js as the file containing the script -->
<script src="arrowNav.js"> </script>

</head>






<!-- Call getMax() function on body load to ensure script can
calculate
Maximum X,Y grid values ------------------------------------------->

<body onload="getMax()">

<form name="form1">
<center>
<font size="+2">The <b>ultimate</b> arrow key TesT ... ever</font>
</center>

<BR> <center><a name="L1" x="1" y="1" href="balls.html">Link1 (1,1)</a>

<BR><BR> <input name="T1" value="Text1 (1,2)" x="1" y="2" type="text"
onfocus="setXY()">
<input name="T2" value="Text2 (2,2)" x="2" y="2" type="text"
onfocus="setXY()">



<BR><BR> <a name="L2" x="1" y="3" href="balls.html" onfocus="setXY()">
Link2 (1,3)</a> &nbsp some irelavant text &nbsp
<a name="L3" x="2" y="3" href="balls.html" onfocus="setXY()"> Link3
(2,3)</a> &nbsp
<a name="L4" x="3" y="3" href="balls.html" onfocus="setXY()"> Link4
(3,3)</a> &nbsp
<a name="L5" x="4" y="3" href="balls.html" onfocus="setXY()"> Link5
(4,3)</a>


<BR> <a name="L6" x="1" y="4" href="balls.html" onfocus="setXY()">
Link6 (1,4)</a> &nbsp some irelavant text &nbsp
<a name="L7" x="2" y="4" href="balls.html" onfocus="setXY()"> Link7
(2,4)</a> &nbsp
<a name="L8" x="3" y="4" href="balls.html" onfocus="setXY()"> Link8
(3,4)</a> &nbsp
<a name="L9" x="4" y="4" href="balls.html" onfocus="setXY()"> Link9
(4,4)</a>


<BR><BR> <input name="T3" value="Text3 (1,5)" x="1" y="5" type="text"
onfocus="setXY()">

<BR><BR> Some more useless text

<BR><BR> <input name="T4" value="Text4 (1,6)" x="1" y="6" type="text"
onfocus="setXY()">
<input name="T5" value="Text5 (2,6)" x="2" y="6" type="text"
onfocus="setXY()">



</center>
</form>
</body>
</html>



It looks a little but chaotic, but thats just the text wrapping, copy
and paste into a proper editor and it should all come out a bit
clearer.

With a bit of luck this might actually save the universe one day.
And remember:
Beer is not the answer, it is the question...the answer is YES!!!!

ciao
will

 
Reply With Quote
 
SirWilliam
Guest
Posts: n/a
 
      03-09-2006
PS: I take what I said about the wrapping being sorted in a proper
editor back...

 
Reply With Quote
 
Jonas Raoni
Guest
Posts: n/a
 
      03-09-2006
SirWilliam wrote:
> Thanks Jonas.
>
> I had a look the at URL mentioned, pretty close to what we needed but
> didn't realy shed any light on why our script didn't work when using a
> form.


Ok

> <input name="T2" value="Text2 (2,2)" x="2" y="2" type="text"> onfocus="setXY()">


Instead of setting this manually, you can make it automatic, by keeping
track of all the inputs offsets, then you just need to check who's the
nearest from the current input offset or create your grid dinamically
(if your page layout doesn't change while filling the fields, that would
be the best solution) ;]

getOffset = function(o){
for(var r = {x: o.offsetLeft, y: o.offsetTop, h: o.offsetHeight, w:
o.offsetWidth};
o = o.offsetParent; r.x += o.offsetLeft, r.y += o.offsetTop);
return r;
}


--
Now with alcohol <URL:http://youtube.com/watch?v=lnQTZxqxc10> =X
Jonas Raoni Soares Silva
http://www.jsfromhell.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to get the keycode press in a web form win ASP .Net 2 05-20-2008 09:53 AM
Assigning methods to objects, and assigning onreadystatechange to an XMLHttpRequest -- an inconsistency? weston Javascript 1 09-22-2006 09:33 AM
document.getElementById fails when assigning return value to variable with same name as id? weston Javascript 19 01-01-2006 08:22 PM
"Keycode DLL not found or invalid keycode" Marvin Massih ASP .Net 0 12-31-2004 05:40 PM
Forcing event.keyCode Character Into Input Box Value Robert Nurse Javascript 1 07-01-2004 08:19 PM



Advertisments