Today I had to cook up a simple form with two input fields, so that two barcodes could be scanned into their respective fields and then submitted (the point being to link two IDs in a database that have been encoded in separate barcodes). There was one twist.
The barcode reader automatically appends a return character to the end of the string it’s read… which would, in any normal circumstance, submit the form. Obviously problematic unless we split the form over several pages, which is just yuck.
If the barcode reader hadn’t returned character 13 (return/enter/whatever you’ll call it) at the end of the string, it’d be trivial to pick up a “maxlength=x then go to next field” script off the side of the road… they’re everywhere. Not so much the case with this exact problem, though, so I thought I’d share…
[source:str javascript]function catchEnter(e){
var characterCode
if(e && e.which){
e = e
characterCode = e.which
} else {
e = event
characterCode = e.keyCode
}
if(characterCode == 13){
document.getElementById(‘cardid’).focus();
return false
} else{
return true
}
}[/script]
Note we’re not using DOM methods here… there isn’t any equivalent to which or keyCode that I’m aware of (I looked enough). keycode is the important one… which is used by the likes of Netscape 4.x and other nasties… I don’t really want to know about it, but I stole the key trap code from somewhere (lost the site) and didn’t really have a reason to intentionally break the behaviour for those browsers!
So we use one of those (probably keycode) to set characterCode, which is a numeric value that corresponds to Unicode decimal values. 13 is carriage return. Then it needs to be compared to event (the character that triggered the onkeypress event), here used as e for convenience… and if this is true, then focus will go to the next field (in this case cardid) and the character will return false to prevent the form from submitting.
I’ve got a static demo here (don’t mind the message at the top, it was an HTML mockup)… try entering something into the first field and pressing return. Then press return again, and the form will submit.
Obviously this Javascript only works for a two-field case… but you could dynamically set the element for focus to follow to by parsing that through to the function onkeypress event. The only other thing I can think of is to getElementsByTagName every input field in the form and use the array to dynamically set the “next” field… but that would have been waaaay overkill for what I had to do.
This behaviour isn’t just useful for barcode scanners, by the way. Desktop applications often exhibit this kind of behaviour, and it also goes some way to ensuring all fields are filled without doing formal validation (either JavaScript on submit, or server-side).
I’m not quite following — why would someone hit “Return” after the first field, rather than “Tab?” Or is it the scanner that would be inputting the text into the fields?
Yes, the scanner is inputting text. It enters a string of numbers, then a return character. This way, the operator has to just go “click” on two different barcodes and not touch the keyboard at all.
My point at the end was that this extends to other applications where users expect to be able to press return to change field focus (instead of tab, yeah)… SOME desktop applications have exhibited this behaviour in the past (names/examples don’t spring to mind, sorry).
We have a similar situation, here at work — where we use UPS WorldShip, and FedEx shipping software — each of which we can scan in serial numbers, barcodes, etc. We can also scan them directly into OUR software interface, using a typical text field. We don’t, however, have “Return” automatically “submit the form,” even though this example proves we could. (For our app, the user still has to hit return, or click “submit.”)
Yeah… same kind of thing. We just had to build something quickly and a web interface was the fastest way for us to do that, hence the need for weird character trapping stuff :P Also, there are about 80,000 barcodes to be scanned twice (80,000 records to be linked to 80,000 cards), so the time taken to click “Submit” adds up… lots.
Sigh, John Doe is at it again…
I swear that guy must be bankrupt by now. He is always posting his bank account and credit card numbers all over the place.
Hi.
now did an assignment for my web admin course, where i had to create a user login form and a script, which would use the username and password fields, in a login form. and show a message that i logged in, and the current local time.
now did that, but when i load the form, UserDetails.html, instead of going to the first form field, automatically , it goes to the login button. now is there a javascript function, which will do this, and tried looking on the net, looking for a simple javascript, to use the body onload function, to load the function when the form loads.
now i knew how to do that a while back, but have forgotten, and tried several things, but still not working.
using texpad for my text editor.
now if any one has got any ideas, or suggest how to do this, Joe, had a look at your script, and way too complex for what i want it to do, all i want is the script to load the form, land on the first field, username, and then can fill in the details.
which then loads a php script which i written and load easy php, what i am using for my php language.
then use the http://localhost/UserDetails.html to load the form, fill in the details, click on login.
wellah!
there it is.
the message, and the current time.
so if any one can help, e-mail me.
cheers Marvin.
Marvin:
window.onload = function () { document.getElementById('elementID').focus(); }I can see this is very usefulll, a lot of people is used to press “return/enter” to change from one cell to the nex when working with excel (and other spreadsheets to) files to fill columns of a list, and pressing tab changes cell in other direction, so people often use “return/enter” to change field as well. I think that if the next field is to the right of the previus field, people probabily press TAB, but if next field is below the previus field, many people will press “return/enter”.