...

View Full Version : converting "ENTER" keypress to "TAB"



canadianjameson
06-16-2004, 03:28 AM
helllllo people. i found a JS script that prevents people from hitting the enter key when filling out form fields, but allows it in a textarea field. neat.

currently the script nullifies the keypress, i was wondering if someone could show me how modify the script to do two things

a) instead of nullfiying the ENTER keypress, i'd like it if it would convert it into a TAB keypress, so that it would tab the user down to the next field to be filled out (i set all my tabIndex's)

b) i'd also like the UP arrow to be converted into the SHIFT+TAB keypress (to move up through the fields, and the DOWN arrow to be converted into the TAB keypress to move the user down through the fields.
- regarding the UP & DOWN functions, i'd like to be able to comment them out if need be and still be able to use the ENTER --> TAB function... so if the addition can be written in a manner condusive to that, i'd be very appreciative.

anywhoo, here be the code


<script language="javascript" type="text/javascript">
function checkCR(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = checkCR;
</script>


thanks in advance

canadianjameson
06-16-2004, 03:38 AM
hehe upon reconsideration i think i'm about to make my/your life somewhat more complicated.

i realised that this script is active on the entire page... so any enter press or up and down press anywhere with the browser window open would tab the user... generally annoying everyone.

is there a way to only make the script active in the form fields? i dont mind if i have to give them all a class name or something... i just want to script to only activate when the user is in the fields so to not cause generalized mayhem and confuse my users.

glenngv
06-16-2004, 07:12 AM
Don't try to change browser's behavior. It will annoy and confuse users especially those who are not computer-savvy. They might thought it's a normal behavior and when they go to other site, they will also expect that behavior.

canadianjameson
06-16-2004, 05:32 PM
well thats it though, i dont want them to have that, hence:



i realised that this script is active on the entire page... so any enter press or up and down press anywhere with the browser window open would tab the user... generally annoying everyone.

is there a way to only make the script active in the form fields? i dont mind if i have to give them all a class name or something... i just want to script to only activate when the user is in the fields so to not cause generalized mayhem and confuse my users.


i only want it to be functional in the form fields... and not in the general browser usage.

can it be done?

glenngv
06-17-2004, 04:18 AM
i only want it to be functional in the form fields... and not in the general browser usage.

can it be done?
Yes I know that, but will your users know it?

It's possible but that's not the issue here.
But I'm not here to tell you not to do it, I just want you to realize the consequence of that to new internet users. :)

canadianjameson
06-17-2004, 06:47 PM
hmmm, i see your point. oooh-kay, here's what we're gonna do... i'll drop the mouse arrow functionality just because, yes, that would confuse people... but i'd still like to turn the nullified ENTER keypress into a TAB.... because that is found in some currently existing programs such as Excel, and wont be foreign to as many users.

so how do i do that?

Roy Sinclair
06-17-2004, 07:12 PM
Note that the script you posted finds the form element. Now also remember that the form elements are in an array, so iterate your array until you find the current element by comparing the array entries to the found form element. Since the array of form elements is arranged according to the order they are declared you can add one to the number of the array, reset it to zero if it exceeds the bounds and then set the focus to that element.

Did that make sense to you, or do I need to explain more completely?

canadianjameson
06-17-2004, 07:32 PM
i kind of get the gist of what you said... but my knowledge of actual JS coding is cosmetic at best... so i dont know how to apply/code what you suggested above

Roy Sinclair
06-17-2004, 08:13 PM
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}

becomes:

if ((evt.keyCode == 13) && (node.type=="text"))
{
for (var index = 0; index < document.forms[0].elements.length; index++)
{
if (document.forms[0].elements[index] == node)
{
document.forms[0].elements[index].focus();
break;
}
}
return false;
}


I've not tested this so I can't say it's all good and will work but this ought to get you close.

canadianjameson
06-17-2004, 09:18 PM
thats one way to do it... but it doesnt work as planned. the logic behind it (as i can deduce) is to change the focus of the form to the next field... but couldn't we just catch the "evt.keyCode == 13" and change it to "evt.keyCode == 9" <-- tab

something like:


if ((evt.keyCode == 13) && (node.type=="text")) {return evt.keyCode == 9}


?

Roy Sinclair
06-17-2004, 10:16 PM
You can try but it would be more like:



if ((evt.keyCode == 13) && (node.type=="text")) {evt.keyCode == 9}
return true; // You want to return true regardless of the original keycode now


I have no idea whether that'll work though.

canadianjameson
06-17-2004, 11:00 PM
oops, double posted

canadianjameson
06-17-2004, 11:00 PM
n00pe, no luck...

seems like me & roy are stumped. i tried:


if ((evt.keyCode == 13) && (node.type=="text"))
{
(evt.keyCode == 13) == (evt.keyCode == 9);
return true;
}


and


function checkCR(evt) {
var enter = evt.keyCode == 13;
var tab = evt.keyCode == 9;
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((enter) && (node.type=="text")) {
enter == tab;
return tab;}
}
document.onkeypress = checkCR;

but that failed miserably

anyone?

caldasgsm
06-18-2004, 01:19 AM
n00pe, no luck...

seems like me & roy are stumped. i tried:


if ((evt.keyCode == 13) && (node.type=="text"))
{
(evt.keyCode == 13) == (evt.keyCode == 9);
return true;
}


and


function checkCR(evt) {
var enter = evt.keyCode == 13;
var tab = evt.keyCode == 9;
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((enter) && (node.type=="text")) {
enter == tab;
return tab;}
}
document.onkeypress = checkCR;

but that failed miserably

anyone?

maybe this...



if(evt.keyCode == 13 && node && node.type=="text")
{
evt.keyCode = 9;
evt.returnValue = true;
evt.cancelBubble = false;
return true;
}

canadianjameson
06-18-2004, 02:03 AM
nice try, unfortunantly it didnt work. this is proving to be challenging.

anyone up for a good challenge?

glenngv
06-18-2004, 05:05 AM
I think you can only change the keyCode in IE.


function checkCR(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
if (!evt) return true;
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (evt.keyCode == 13 && node && node.type=="text") {
evt.keyCode = 9; //tab
return true;
}
}
document.onkeydown = checkCR;

You have to use onkeydown event handler because TAB is not detected in onkeypress.

canadianjameson
06-18-2004, 06:22 AM
sweet. i'll check it out at home tomorrow. in the mean time, thanks

canadianjameson
06-18-2004, 06:48 PM
*does his pantented happy-jig"!

thanks! works wonders

for kicks i was going to try to add in the letf arrow & right arrow functionality incase i ever needed to make an app like excel, but online.

the only issue is that in here http://www.10mar2001.com/work/keyCodes.html there doesnt seem to be a keycode for SHIFT+TAB (which would be needed to go backwards).

does anyone know if that exists?

my code (which didnt work for some reason) was


function checkCR(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
if (!evt) return true;
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (evt.keyCode == 13 && node && node.type=="text") {
evt.keyCode = 9; //tab
return true; }
else if (evt.keyCode == 39 && node && node.type=="text") { // 39 = right arrow
evt.keyCode = 9; //tab
return true; }
}
document.onkeydown = checkCR;


hmm says i...

Roy Sinclair
06-18-2004, 07:58 PM
The keycode for "shift tab" is the same code as for "tab", you have to look for the separate "shift" key indicator. Ctrl and alt are handled the same way.

canadianjameson
06-18-2004, 08:39 PM
but the how would i code a double keystroke? SHIFT+TAB...

shift = 16
tab = 9

so something like:


function checkCR(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
if (!evt) return true;
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (evt.keyCode == 13 && node && node.type=="text") {
evt.keyCode = 9; //tab
return true;
}
else
if (evt.keyCode == 38 && node && node.type=="text"){ // 38 = up arrow
evt.keyCode = 16 && evt.keyCode = 9;
return true;
}
}
document.onkeydown = checkCR;


?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum