Capturing <Enter> and moving focus to next tabindex

[jerrygarciuh]

Hello,

I have been playing with various Googled solutions for capturing the <Enter>
key to suppress form submission.

My first question is whether anyone has a script that works in all common
browsers? The script bellow is IE only. It fails FF 1.0 and NN 7.

Also, if I can trap the keypress I would like to use it to tab to the next
tabindex.

Is that possible? Ca I grab current focused tabindex?

TIA,

jg

__CODE__

<script language=javascript>
<!--

var bIsEnterKey = false;

function checkKeyPress(){

return !bIsEnterKey;

}

function setKeyPress(){
if(event && event.which){ //if which property of event object is
supported (NN4)
characterCode = event.which //character code is contained in NN4's which
property
}
else{
characterCode = event.keyCode;//character code is contained in IE's
keyCode property
}

bIsEnterKey = (characterCode.toString() == '13');

window.setTimeout("bIsEnterKey=false;",1000);

}
//-->

</script>

<form name="form1" method="post" action="xxx.html" onsubmit="return
checkKeyPress();" onkeypress="setKeyPress()">
<input type="text" name="textfield">
</form>

 

[web.dev]

Hello Jerry,

When you hit <Enter> on a form that has focus, that triggers a submit
as you have said. Therefore, all you really need is the onsubmit event
handler and just return false. There is no need to check if the
<Enter> key was actually pressed. This will suppress form submission.

 

[jerrygarciuh]

Thanks for the reply,

Thing is that approach prevents form submission no matter what.

I want to submit the form only when button is clicked. One problem I am
running into is that onClick events for a submit button are fired when user
hits <Enter> while in a textfield. Hence I can't just set a
document.variable when button is clicked or call a special sub when clicked.

Any thoughts?

jg

 

[Yann-Erwan Perio]

jerrygarciuh wrote:

Hi Jerry,

I have been playing with various Googled solutions for capturing the <Enter>
key to suppress form submission.

You certainly have your reasons to do so, but you're taking a dangerous
way IMHO: users are generally aware of their browsers' behavior, and
altering it in some way may always confuse them rather than enhance
their experience - changing the behavior of the ENTER key would likely
lead to such confusion.

My first question is whether anyone has a script that works in all common
browsers? The script bellow is IE only. It fails FF 1.0 and NN 7.

You won't have this in common to all browsers, since (1) the ENTER key
behavior isn't standard (which means that not all browsers behave this
way) and (2) old browsers used to exhibit the behavior on different key
events (keyup, keydown and keypress) which would require the code to
take into account some sort of key events flow (a nightmare, I've done
this before and it was ugly at best).

However, if targeting recent browsers is acceptable to you, then check
the following simple version (tested IE6, Mozilla 1.7 and Opera 8 and
Windows) - given the general issue it's unlikely to work in all recent
browsers, though - please test accordingly.


---
<form action="foo">
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">
<input type="text" tabindex="4">
<input type="submit">
</form>

<script type="text/javascript">
function enter(form){
var fields=form.elements, a=[];

// add ENTER listeners
for(var ii=fields.length; ii-- {
if(fields[ii].type=="text") {
_e(fields[ii], "onkeypress", enterListener);
a[a.length]=fields[ii];
}
}

// init the tabIndex behavior
a.sort(
function(a,b){
return a.tabIndex > b.tabIndex ? 1 : -1;
}
);

for(var j=0; j<a.length; j++){
a[j].next = a[j+1]||a[0];
}

// add the submission manager
_e(
form,
"onsubmit",
function(evt){
if(form.hasEntered) {
form.hasEntered=false;
return false;
}
return true;
}
);

// ENTER listener
function enterListener(evt){
evt=evt||window.event;
var el=this;
if((evt.keyCode||evt.which)==13) {
form.hasEntered=true;
setTimeout(
function(){ el.next.focus(); },
1
);
}
}
}

// event manager
function _e(obj, evt, func){
if(obj[evt]) {
obj[evt]=(function(h){
return function(evt){
return func.call(this, evt) && h.call(this, evt);
}
})(obj[evt]);
} else {
obj[evt]=func;
}
}

// --- test ---
enter(document.forms[0]);
</script>

 

[Lee]

Yann-Erwan Perio said:

jerrygarciuh wrote:

Hi Jerry,


You certainly have your reasons to do so, but you're taking a dangerous
way IMHO: users are generally aware of their browsers' behavior, and
altering it in some way may always confuse them rather than enhance
their experience - changing the behavior of the ENTER key would likely
lead to such confusion.

I'd like to underscore that point. Changing web forms so that
they behave the way that you, or even your target audience, are
used to seeing forms behave, rather than the default way, is
almost always a bad idea. It's better for everybody to bite the
bullet and learn to use the default interface.

 

[jerrygarciuh]

Yep,

Thank you so much! Your solution will save me much headbanging attempting
to obey my client who will not listen to me.

You are very kind to have taken so much time on my behalf!

jg

jerrygarciuh wrote:

Hi Jerry,

I have been playing with various Googled solutions for capturing the
<Enter> key to suppress form submission.

You certainly have your reasons to do so, but you're taking a dangerous
way IMHO: users are generally aware of their browsers' behavior, and
altering it in some way may always confuse them rather than enhance their
experience - changing the behavior of the ENTER key would likely lead to
such confusion.

My first question is whether anyone has a script that works in all common
browsers? The script bellow is IE only. It fails FF 1.0 and NN 7.

You won't have this in common to all browsers, since (1) the ENTER key
behavior isn't standard (which means that not all browsers behave this
way) and (2) old browsers used to exhibit the behavior on different key
events (keyup, keydown and keypress) which would require the code to take
into account some sort of key events flow (a nightmare, I've done this
before and it was ugly at best).

However, if targeting recent browsers is acceptable to you, then check the
following simple version (tested IE6, Mozilla 1.7 and Opera 8 and
Windows) - given the general issue it's unlikely to work in all recent
browsers, though - please test accordingly.


---
<form action="foo">
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">
<input type="text" tabindex="4">
<input type="submit">
</form>

<script type="text/javascript">
function enter(form){
var fields=form.elements, a=[];

// add ENTER listeners
for(var ii=fields.length; ii-- {
if(fields[ii].type=="text") {
_e(fields[ii], "onkeypress", enterListener);
a[a.length]=fields[ii];
}
}

// init the tabIndex behavior
a.sort(
function(a,b){
return a.tabIndex > b.tabIndex ? 1 : -1;
}
);

for(var j=0; j<a.length; j++){
a[j].next = a[j+1]||a[0];
}

// add the submission manager
_e(
form,
"onsubmit",
function(evt){
if(form.hasEntered) {
form.hasEntered=false;
return false;
}
return true;
}
);

// ENTER listener
function enterListener(evt){
evt=evt||window.event;
var el=this;
if((evt.keyCode||evt.which)==13) {
form.hasEntered=true;
setTimeout(
function(){ el.next.focus(); },
1
);
}
}
}

// event manager
function _e(obj, evt, func){
if(obj[evt]) {
obj[evt]=(function(h){
return function(evt){
return func.call(this, evt) && h.call(this, evt);
}
})(obj[evt]);
} else {
obj[evt]=func;
}
}

// --- test ---
enter(document.forms[0]);
</script>
---


Regards,
Yep.

 

[Matt Kruse]

I'd like to underscore that point. Changing web forms so that
they behave the way that you, or even your target audience, are
used to seeing forms behave, rather than the default way, is
almost always a bad idea. It's better for everybody to bite the
bullet and learn to use the default interface.

Except in cases where you're building a web interface to something like an
old mainframe application. You may have several thousand users who have
years of experience hitting the enter key to go between fields. Adding
simple scripts to retain this user-expected functionality may improve
efficiency and accuracy, and make users happier.

In an internet context, tabbing on <enter> or auto-tabbing for things like
phone numbers is always a bad idea, IMO.