Today I had to cook up a sim­ple form with two input fields, so that two bar­codes could be scanned into their respec­tive fields and then sub­mit­ted (the point being to link two IDs in a data­base that have been encoded in sep­a­rate bar­codes). There was one twist.

The bar­code reader auto­mat­i­cally appends a return char­ac­ter to the end of the string it’s read… which would, in any nor­mal cir­cum­stance, sub­mit the form. Obvi­ously prob­lem­atic unless we split the form over sev­eral pages, which is just yuck.

If the bar­code reader hadn’t returned char­ac­ter 13 (return/enter/whatever you’ll call it) at the end of the string, it’d be triv­ial to pick up a “maxlength=x then go to next field” script off the side of the road… they’re every­where. Not so much the case with this exact prob­lem, though, so I thought I’d share…

[source:str javascript]function catchEnter(e){
var char­ac­ter­Code
if(e && e.which){
e = e
char­ac­ter­Code = e.which
} else {
e = event
char­ac­ter­Code = e.keyCode
}
if(characterCode == 13){
document.getElementById(‘cardid’).focus();
return false
} else{
return true
}
}[/script]

Note we’re not using DOM meth­ods here… there isn’t any equiv­a­lent to which or keyCode that I’m aware of (I looked enough). keycode is the impor­tant one… which is used by the likes of Netscape 4.x and other nas­ties… I don’t really want to know about it, but I stole the key trap code from some­where (lost the site) and didn’t really have a rea­son to inten­tion­ally break the behav­iour for those browsers!

So we use one of those (prob­a­bly key­code) to set char­ac­ter­Code, which is a numeric value that cor­re­sponds to Uni­code dec­i­mal val­ues. 13 is car­riage return. Then it needs to be com­pared to event (the char­ac­ter that trig­gered the onkey­press event), here used as e for con­ve­nience… and if this is true, then focus will go to the next field (in this case cardid) and the char­ac­ter will return false to pre­vent the form from submitting.

I’ve got a sta­tic demo here (don’t mind the mes­sage at the top, it was an HTML mockup)… try enter­ing some­thing into the first field and press­ing return. Then press return again, and the form will submit.

Obvi­ously this Javascript only works for a two-field case… but you could dynam­i­cally set the ele­ment for focus to fol­low to by pars­ing that through to the func­tion onkeypress event. The only other thing I can think of is to getEle­ments­By­Tag­Name every input field in the form and use the array to dynam­i­cally set the “next” field… but that would have been waaaay overkill for what I had to do.

This behav­iour isn’t just use­ful for bar­code scan­ners, by the way. Desk­top appli­ca­tions often exhibit this kind of behav­iour, and it also goes some way to ensur­ing all fields are filled with­out doing for­mal val­i­da­tion (either JavaScript on submit, or server-side).