Autotabbing Based on Character Count - J Query

Problem
You have a form for allowing users to register a product online, and you require the user to enter a serial number printed on the installation discs. This number is 16 digits long and separated across four input fields. Ideally, to speed the user along in their data entry, as each input field is filled up, you’d like to automatically focus the next input field until they’re finished typing the number:

Solution

Inside <fieldset class="autotab">, find all the <input>elements. Use jQuery’s .bind() method to listen for the keydown and keyup events. We exit the bound function for a handful of keys that we want to ignore, because they are n’t meaningful for automatically tabbing forward or backward. When an <input>element is full, base don the max length attribute, we .focus() the next <input>element. Conversely, when using the Backspace key, if an <input>element is made empty, we .focus() the previous <input>element:

Discussion

Why do we bind both keydown and keyup events?
You could use just the keydown event. However, when the user is done filling out the first input, there would be no visual indication that their next keystroke would focus the second input. By using the keyup event, after the first input is filled, the second input gains focus, the cursor is placed at the beginning of the input, and most browsers indicate that focus with a border or some other highlight state. Also, the key up event is required for the Backspace key to focus the previous input after the current input is empty.
You could use just the keyup event. However, if your cursor was in the second input and you were using the Backspace key to clear it, once you removed all characters, the focus would be shifted into the first input. Unfortunately, the first is already full, so the next keystroke would be lost, because of the max length attribute, and then the keyupevent would focus the second input. Losing a keystroke is a bad thing, so we perform the same check on keydown, which moves the cursor to the next input before the characters lost.
Because the logic isn’t CPU intensive, we can get away with binding both the keydown and keyup events. In another situation, you may want to be more selective.
You’ll notice that the ignoreKeyCodes variable is a string. If we were building it dynamically,it would be faster to create an array and then use .join(',') or .toString()JavaScript methods. But since the value is always the same, it’s easier to simply code it as a string from the very beginning. I also start and end the ignore Key Codes variable with commas, because I am paranoid about false positives. This way, when searching for a keyCode flanked by commas, you are guaranteed to find only the number you’re looking for—if you look for 9, it won’t find 19, or 39.
Notice there is no code to prevent $this.next().focus() from executing when on the
last <input>element. I’m taking advantage of the jQuery chain here. If $this.next()finds nothing, then the chain stops—it can’t .focus() what it can’t find. In a different scenario, it might make sense to precache any known .prev() and .next() elements.
What will happen when JavaScript is disabled? Nothing. The user will have to manuallyclick from one text input field to the next.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics