473,903 Members | 6,268 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Assigning keyCode a value in a document containing a form

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.onkeyd own = keyDown;
}

function keyDown(e) {

var ieKey = event.keyCode;

if (ieKey == 38) {

alert("up arrow");
}

if (ieKey == 40) {

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

</script>
</head>

<body onload="onLoadI nit()" >

<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.htm l">View Document</a></center>
<center><a href="balls.htm l">View Document</a></center>
<center><a href="balls.htm l">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.onkeyd own = keyDown;
}

function keyDown(e) {

var ieKey = event.keyCode;

if (ieKey == 38) {

alert("up arrow");
}

if (ieKey == 40) {

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

</script>
</head>

<body onload="onLoadI nit()" >

<form name="form1" method="get">
<center>
<strong><font size="+2">arrow s 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.htm l">View Document</a></center>
<center><a href="balls.htm l">View Document</a></center>
<center><a href="balls.htm l">View Document</a></center>

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

Mar 7 '06 #1
5 2971
Wi************@ gmail.com 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
Mar 7 '06 #2
Jonas Raoni wrote:
Wi************@ gmail.com 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

Mar 7 '06 #3
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,xMaxA rray;
var yMax = 0;
function setXY() {

Xval = document.active Element.x;
Yval = document.active Element.y;
}

function getMax() {

//Work Out maximum Y
//------------------
for (var i=0;i < document.all.le ngth;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.le ngth;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 == 38) {

// 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.le ngth;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.le ngth;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.ac tiveElement.typ e == "text") &&
(document.activ eElement.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.le ngth;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.ac tiveElement.typ e == "text") &&
(document.activ eElement.value != ""))) {

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

for (var i=0;i < document.all.le ngth;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.onkeyd own=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.j s"> </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.htm l">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.htm l" onfocus="setXY( )">
Link2 (1,3)</a> &nbsp some irelavant text &nbsp
<a name="L3" x="2" y="3" href="balls.htm l" onfocus="setXY( )"> Link3
(2,3)</a> &nbsp
<a name="L4" x="3" y="3" href="balls.htm l" onfocus="setXY( )"> Link4
(3,3)</a> &nbsp
<a name="L5" x="4" y="3" href="balls.htm l" onfocus="setXY( )"> Link5
(4,3)</a>
<BR> <a name="L6" x="1" y="4" href="balls.htm l" onfocus="setXY( )">
Link6 (1,4)</a> &nbsp some irelavant text &nbsp
<a name="L7" x="2" y="4" href="balls.htm l" onfocus="setXY( )"> Link7
(2,4)</a> &nbsp
<a name="L8" x="3" y="4" href="balls.htm l" onfocus="setXY( )"> Link8
(3,4)</a> &nbsp
<a name="L9" x="4" y="4" href="balls.htm l" 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

Mar 9 '06 #4
PS: I take what I said about the wrapping being sorted in a proper
editor back...

Mar 9 '06 #5
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=lnQTZxq xc10> =X
Jonas Raoni Soares Silva
http://www.jsfromhell.com
Mar 9 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2185
by: Jenny | last post by:
Hi, Can I create an array of tags by assigning same name to these tags? For example, I have two <p> tags with the same name t1. But document.all.b.value=document.all.t.length does not work. It works if the tags are <input type=radio...>. This line is OK:
7
2950
by: Don | last post by:
Via JavaScript within the client page containing the checkbox, I'm trying to capture the value of a checkbox to make a cookie out of it. But, all I get is the defined "ON" value, even when it is unchecked. I'm using the following construct: document.cookie = "cpceRememberLoginCookie="+document.getPage1.rememberLogin.value+"; expires=Thr, 01-Jan-2015 00:00:00 GMT"; The actual checkbox value passed in the <form> POST reflects the actual...
4
2298
by: Tauqir | last post by:
I am trying to do a simple thing: I have these two text fields in an HTML form. I want to assign the concatenated value to a TEXTAREA. Can someone help me with the syntax? <HTML> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> </SCRIPT> <table ALIGN="center" border="2" width="100%" cellspacing="8" cellpadding="0"> <FORM action="" method="POST">
17
50308
by: Julia Briggs | last post by:
Are there any gotchas using if (event.keyCode==8)? I understand that to represent backspace, but it doesn't work. I am running Windows XP, using a typical keyboard - but no luck in detecting backspaces. Anyone have experiences with this?
1
20780
by: Perttu Pulkkinen | last post by:
I have different functions that receive window.event as parameter. Functions are used like this: <input type="text" id="x" onkeypress="return onKeyCurrencyCheck(ev, 'x')" onblur ="onBlurCurrencyCheck(event, 'x')""> Works very well with IE, but window.event and maybe window.event.keycode too seems to be missing form firefox. Is there a workaround for this?
6
14913
by: rich_poppleton | last post by:
Help.... I've got a textarea where people type in a description. However for certain reasons we need to stop them typing !$*^ . I have a solution this which works fine in IE: function keypress() {
4
21265
by: Thomas Christensen | last post by:
I'm trying to figure out what key the user pressed using a Danish keyboard layout. charCodeAt returns the correct number, but event.keyCode returns a wrong number, when using one of the keys that are different on a Danish keyboard layout. "-" returns 45 and 189 respectively. Etc. (The input-field in the sample code below displays the right character). I've tried setting the lang-parameter to 'da', but it doesn't make a difference.
20
7033
by: weston | last post by:
I've got a piece of code where, for all the world, it looks like this fails in IE 6: hometab = document.getElementById('hometab'); but this succeeds: hometabemt = document.getElementById('hometab'); Has anyone ever seen anything like this before, or am I dreaming?
8
1706
by: Doug Lerner | last post by:
I have this snippet of client side code running: var makeField = document.forms; alert("makeFieldName name,length,type=" + makeFieldName + ", " + makeField.name + "," + makeField.length + "," + makeField.type); The alert is just in there for debugging.
0
9999
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9847
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11283
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10501
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9685
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6093
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4727
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4308
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3324
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.