Auto-advance in html form input boxes

[williamc]

Somebody asked me if it would be possible to add auto-advance to a web
form where there are a lot of repetitive 5 character fields. I took a
look around the web and found a script, which appears to work in the
couple of browsers I tried it in. However, when I look at the script it
appears to have the wrong number of brackets. Then when I changed the
script to the way I thought it should be, it still worked!

I'm totally rusty on javascript. I think I remember that you're allowed
to omit brackets when you only have 1 line following the if (or while,
or whatever).

A couple of questions:

Are the brackets in the original script below wrong or am I missing
something?

Can anyone recommend a different auto-advance script?

Or, is auto-advancing a bad idea all around from a
usability/accessibility point of view?

thx,

--wmc.


<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Cyanide_7 (le*****@hotmail.com) -->
<!-- Web Site: http://members.xoom.com/cyanide_7 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
function autoTab(input,len, e) {
var keyCode = (isNN) ? e.which : e.keyCode;
var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
if(input.value.length >= len && !containsElement(filter,keyCode)) {
input.value = input.value.slice(0, len);
input.form[(getIndex(input)+1) % input.form.length].focus();
}
function containsElement(arr, ele) {
var found = false, index = 0;
while(!found && index < arr.length)
if(arr[index] == ele)
found = true;
else
index++;
return found;
}
function getIndex(input) {
var index = -1, i = 0, found = false;
while (i < input.form.length && index == -1)
if (input.form[i] == input)index = i;
else i++;
return index;
}
return true;
}
// End -->
</script>

[Matt Kruse]

"williamc" <te************@williamc.com> wrote:

I'm totally rusty on javascript. I think I remember that you're allowed
to omit brackets when you only have 1 line following the if (or while,
or whatever).
This is correct. As with many languages, you can do this:

if (condition)
statement;

or with braces,

if (condition) {
statement;
}

Holy wars erupt when discussing code formatting, so be careful :)
I think that braces should _never_ be left off. It's always clearer with
braces included, and when you later go to add another statement that should
be part of the if block, you don't create a bug if you forget to add the
braces.
Even for simple conditions, I prefer to do

if (condition) { statement; }
Are the brackets in the original script below wrong or am I missing
something?
They are fine, but the formatting is confusing. Leaving them off serves no
purpose other than to confuse!
Or, is auto-advancing a bad idea all around from a
usability/accessibility point of view?

That's up for debate, but I think they're annoying. They break the
convention that users are used to, unless this is a form that will be
repeatedly used by the same people on an intranet or something.

When I encounter an auto-advance script, I always end up hitting tab anyway,
and advancing two, then typing in the wrong box, then deleting, then
shift-tabbing back to the box I was in. Unless there is some clear visual
marker telling the user that their cursor will be automatically advanced, or
if the user is used to it and knows what to expect, I think it's a bad idea.

--
Matt Kruse
Javascript Toolbox: http://www.mattkruse.com/javascript/

[Richard Cornford]

williamc wrote:
<snip>

I'm totally rusty on javascript. I think I remember that you're
allowed to omit brackets when you only have 1 line following the if
(or while, or whatever).
Strictly, the brackets are not part of the - if - else - construct at
all, and lines don't come into it either as javascript tolerates a
liberal distribution of white space characters, including line breaks,
within statements. The - if - productions are:-

| IfStatement :
| if ( Expression ) Statement else Statement
| if ( Expression ) Statement

- so - if - (and - else) are flowed by _exactly_one_ statement (which
may be broken across as many lines as desired).

Where the brackets enter the picture is with the Block statement:-

| Block :
| { StatementList<opt> }
|
| StatementList :
| Statement
| StatementList Statement

A block statement is a single statement, but may contain as many other
statements as is desired.

The same is true for - for - , - while -, etc.
A couple of questions:

Are the brackets in the original script below wrong or
am I missing something?
The syntax looks valid. Confused a bit by two inner functions and the
lack of the use of the Block statement to make the grouping of
statements related to - if - and loop statements clear. Correctness, in
this context, goes into the area of coding style, I wouldn't have
omitted containing block statements and JSLINT would not pass this
script as it is.
Can anyone recommend a different auto-advance script?
No, but I don't think this one should be used. It includes browser
detecting, it only seems interested in two browser types, the use of
inner functions makes it slower than it needs to be and the extensive
use of HTML style comments in a script context suggests that its author
was not particularly confident in their javascript authoring when it was
created.
Or, is auto-advancing a bad idea all around from a
usability/accessibility point of view?

<snip>

People who use their keyboard for navigation will enter the required
information in the first field and hit the tab key instinctively. They
will not be happy to find themselves typing into some field after the
next. If the point is to allow the user to enter all of the information
in one sequence then the use of more than one field becomes
questionable. Presumably both client-side and server-side validation
could apply whatever rules would be used to auto-advance to the next
field in splitting the information in a single field up for validation
and storage.

Richard.

[williamc]

Richard Cornford wrote:

No, but I don't think this one should be used. It includes browser
detecting, it only seems interested in two browser types, the use of
inner functions makes it slower than it needs to be and the extensive
use of HTML style comments in a script context suggests that its author
was not particularly confident in their javascript authoring when it was
created.

I'm not even sure why the original author was detecting NN and passing a
ref to the event to autoTab() since if only auto-advancing was required,
something simple like this seems to work as well as his original
script...

function autoTab(input,len) {
if(input.value.length >= len)
input.form[(getIndex(input)+1)].focus();
}

function getIndex(input) {
var index = -1, i = 0;
while (i < input.form.length && index == -1)
if (input.form[i] == input)index = i;
else i++;
return index;
}

re: the usability question. I hear ya. My original comment was what's
wrong with the tab key?

Although at most people's typing speeds the cursor jumps fast enough so
they might avoid the unwanted hitting of the tab key, the script also
breaks shift tabbing back to a full input box.

thx for the reply...

--williamc