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:
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:
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.
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.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.