Re-assign keyboard keys with JavaScript??

@marms767Dec 01.2004

I have customer service intranet that the users are requesting to be able to key in orders “one handed” like they did in their old AS/400 system. The problem is that to go to the next field on a web form they have use the “Tab” key with is on the other side of the keyboard from the number keypad. They are demanding a “tab like function” somewhere in the key pad because they need the other had to turn pages on faxed order sheets.

Does anyone know how to use JavaScript to make say the “num lock” key double for a “tab” key for the order entry page they use (they are use to using “enter” on their old system, but I need that to submit the form.) They have to enter a hundered items at one time very fast on a large form I created for the purpose.

Thanks Much

to post a comment

JavaScript

8 Comments(s) _↴

@JPnycDec 01.2004 — #I don't think JS can do what you want to. You could call a function on the keypress event, which could move the focus to the next element, but I don't think you can disable the key's original function.

@marms767authorDec 02.2004 — #Could you direct me toward how I could call a function on say the "*" keypress or the "Page Up" key and how would I move focus to the next element in the form in the function? Don't know how to do either at the moment.

@JPnycDec 02.2004 — #Well it's reasonably involved and I haven't done it, but I know the approach you need. You have to capture the keypress event 1st, then get the ASCII keycode of the key that was pressed, so you know which it was, then you place a function call on that event. [URL=http://www.webreference.com/dhtml/diner/keypress/keypress2.html]Here[/URL] is a tutorial on the subject.

The function will use the elements array of the form and an index which is incremented on each keypress.

like:

document.forms[0].elements[i].focus();

i++;

There are a couple of problems that come to mind right off with this. 1st, as I said, you can't disable the key's original function, so that's gonna fire also. 2nd, if you use an index and increment through the element array, if you change the focus with the mouse, or don't start at the 1st element, it will throw the whole thing off. I think there has to be a better way than this of doing what you want.

@JPnycDec 02.2004 — #Couple more things; the index variable must be global so it retains it's value after the function's done firing, and you'll need a test to reset it when you reach the end of the form, like this;

function tabThru(){

if(i<elements.length) {

document.forms[0].elements[i].focus();

i++;

}

else {

i = 0; tabThru();

}

}

@marms767authorDec 02.2004 — #On the "original function of the key" issue, I was figuring on firing a function onblur on each field to remove all "*" from the field. The users will never need to use that character in an order, the are just keying in digits for item numbers and quantities in the form I need this for.

Do you have any ideas on a better way to get this effect? This angle was all I could think of.

Thank you so much for your helpful responses.

@JPnycDec 02.2004 — #I suppose you could do that. In fact, you could just make it the last action in the one function.

@7studDec 02.2004 — #Hi,

There are a couple of problems that come to mind right off with this. 1st, as I said, you can't disable the key's original function, so that's gonna fire also.[/quote]

That can be taken care of. In the function that checks the keycodes, you can return 'false' if the designated key is pressed, which cancels the keypress event and prevents the character from being entered in the form.

2nd, if you use an index and increment through the element array, if you change the focus with the mouse, or don't start at the 1st element, it will throw the whole thing off[/quote]
That also can be taken care of. The 'this' keyword can be used to indicate which element is currently being filled in, and if the designated key is pressed, the keypress can be canceled, and the focus() can be set to the next element

I believe the script below does what you want. The Num Lock key does not generate a keyCode in IE, so I used the '*' as the designated key. Also, on my system Num Lock has to be 'on' (it's toggled on and off by pressing the Num Lock key)--otherwise the keypad won't enter the numbers, so that's another reason not to use Num Lock as the designated key.

<i>
 </i>&lt;!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
 &lt;html xmlns="http://www.w3.org/1999/xhtml" 
 xml:lang="en" lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;html and javascript&lt;/title&gt;
 &lt;/style&gt;
 &lt;script type="text/javascript" language="javascript"&gt;
 &lt;!-- Hide from browsers without javascript
 
 var elmts;
 window.onload=function()
 {
 elmts = document.forms["f"].elements; //prevents having to look up the elements array again 
 
 <i>	</i>//Assign onkeypress event to each form field (you might also
 <i>	</i>//consider just assigning the onkeypress event to the whole document):
 <i>	</i>for(var i = 0, len=elmts.length; i &lt; len ; i++)
 <i>	</i>{
 <i>	</i>	elmts[i].onkeypress = if_asterisk;
 <i>	</i>}
 <i>	</i>elmts[0].focus(); //put focus on first element, so they are ready to enter data
 };
 
 function if_asterisk(e)
 {
 if (!e) var e = window.event; //for IE
 
 <i>	</i>var code;
 <i>	</i>if(e.which) code = e.which; //need this for NN4 and surprisingly FF1.0
 <i>	</i>else code = e.keyCode; //for IE
 
 <i>	</i>if (code == "*".charCodeAt(0)) //substitute whichever character you want for "*"
 <i>	</i>{
 <i>	</i>	var i = 0;
 
 <i>	</i>	//find the position in the elements array of the current element:
 <i>	</i>	do
 <i>	</i>	{
 <i>	</i>		if(elmts[i]==this) //then found the current element
 <i>	</i>		{
 <i>	</i>			if (i == elmts.length - 1) elmts[0].focus(); //if last element, put focus on first
 <i>	</i>			else elmts[i+1].focus(); 
 <i>	</i>		}
 
 <i>	</i>	}while(elmts[i++] != this);
 
 <i>	</i>	return false;
 <i>	</i>}
 
 <i>	</i>return true;
 }
 
 
 // End hiding --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;form name="f" method="post" action=""&gt;
 &lt;div&gt;&lt;input type="text" name="tb0" /&gt;&lt;/div&gt;
 &lt;div&gt;&lt;input type="text" name="tb1" /&gt;&lt;/div&gt;
 &lt;div&gt;&lt;input type="text" name="tb2" /&gt;&lt;/div&gt;
 &lt;div&gt;&lt;input type="text" name="tb3" /&gt;&lt;/div&gt;
 &lt;/form&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@marms767authorDec 02.2004 — #7stud,

You are the BEST!!! Thank you, thank you, thank you. I plugged it in and it totally worked way past my original expectations for the whole concept. They requested the "+" key instead and I was able to switch that out easily just like you said. This is something our CSR's had been wanting for almost a year and now they are bouncing off the walls with glee. They have offered the IT department tasty baked goods for a whole month!

Thanks again for coding that up! You Rock!

Mike

Also in #JavaScript _↴

passing variables within onSubmit Javascript issue in Firefox im stuck =(

Success!

Help @marms767 spread the word by sharing this article on Twitter...

Tweet This

Re-assign keyboard keys with JavaScript??

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Re-assign keyboard keys with JavaScript??

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴