In Javascript, how to automatically move the cursor to the next text field when the current one is full?

Question

Suppose I have two HTML text fields on my web page:

<input type='text' id='txt1' maxlength='5' /> <input type='text' id='txt2' maxlength='5' /> 

Each text field allows the user to enter up to five characters. How can I use Javascript with or without jQuery to automatically move the cursor from txt1 to txt2 when the user enters five attributes in txt1 ?

Answer 1

The main implementation will be like this:

  $('#txt1').keyup(function() { if(this.value.length == $(this).attr('maxlength')) { $('#txt2').focus(); } }); 

But there are some subtleties of usability that you may or may not care. If you find that the above was not enough, there are many jQuery plugins to do this for you.

Answer 2

It is called autotabbing, and there are many plugins that already exist for jquery that do this. Just follow it.

If you want to know how to do this, you bind the onkeyup event to the inputs. Each time you release a key, make sure that it is not a function key, such as a Tab (you must allow the user “Shift + Tab” or “Tab” to enter without it, and then auto-enter the next field.)

Then, if the input value is longer than the input maxlength attribute, set the focus to the next input (in jQuery, $currentInput.next('input').focus() .

Answer 3

None of these solutions work in direct Javascript ... this snippet is the beginning:

 document.getElementById('txt1').onkeydown = function() { if (this.value.length == this.maxLength) document.getElementById('txt2').focus(); } 

But once you have entered the number, you cannot go back and edit it, because as soon as you press delete, it will return to txt2.

The only thing to change is to do onkeyup .: D

jQuery is redundant and lazy programming for the vast majority of things on which it is used, and this is a great example. If you do not use it on the page, this is a lot of overhead for such a tiny task.

Answer 4

The idea is to handle the keydown event and check if the maximum length has been reached; if so, focus the next control.

 document.getElementById('txt1').onkeydown = function() { if (this.value.length == this.maxLength) document.getElementById('txt2').focus(); } 

Answer 5

JQuery plugin:

https://github.com/Mathachew/jquery-autotab

Simplest use:

Add an autostart class to your inputs.

 $('.autotabbed').autotab(); 

Answer 6

You can use the jQuery UI :focusable by replicating the class as follows:

 $.extend($.expr[':'], { focusable: function(element) { var nodeName = element.nodeName.toLowerCase(), tabIndex = $.attr(element, 'tabindex'); return (/input|select|textarea|button|object/.test(nodeName) ? !element.disabled : 'a' == nodeName || 'area' == nodeName ? element.href || !isNaN(tabIndex) : !isNaN(tabIndex)) // the element and all of its ancestors must be visible // the browser may report that the area is hidden && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length; } }); 

Then you can process it like this:

 $(document).ready(function() { $('input[type=text]').keydown(function() { var $this = $(this), $focusables = $(':focusable'), current = $focusables.index(this), $next; if ($this.val().length == $this.attr('maxlength')) { $next = $focusables.eq(current+1).length ?$focusables.eq(current+1) : $focusables.eq(0); $next.focus(); } }); }); 

See a working example here:

http://jsfiddle.net/kU6ZN/