Using Javascript to Auto move cursor onto next form field

Question

Is it possible using Javascipt to automatically send the user from one field to the next when the maxlength of the field has been reached?

If so, how?

score 1 · Accepted Answer · answered Mar 11 '13 at 11:12

1

yes it is possible. Suppose your textbox max length is 5. You need to make an function onkeyup event and count the length of the textbox value. In this function if length is equal or exceed to 5 then you need to write second textbox focus function calls.

answered Mar 11 '13 at 11:12

Gaurav Agrawal

4,355
10
42
61

1

i used this code: function moveOnMax(field,nextFieldID) { if(field.value.length >= field.maxLength) { document.getElementById(nextFieldID).focus(); } } - but its not working – Apb Mar 11 '13 at 11:14
1

@user2156244 : Use this Corrected code.... – Gaurav Agrawal Mar 11 '13 at 11:28
/*← and →*/ var keyUpTimeout; $body.on('keyup', '.auto-focus-prev-next', function (event) { var $target = $(event.target); clearTimeout(keyUpTimeout); keyUpTimeout= setTimeout(function() { if ($target.val().length === parseInt($target.attr('maxlength'))) { $target.nextAll('input:not([readonly]):first').focus(); } if($target.val().length === 0) { $target.prevAll('input:not([readonly]):first').focus(); } }, 100); }); – Arthur Shlain Apr 16 '19 at 08:32

PSR · Answer 2 · 2013-03-11T11:39:23.543

1

$('#productkey1').keyup(function() {
     if(this.value.length >= $(this).attr('maxlength'))
     {
         $('#productkey2').next().focus();
     }
 });

edited Mar 11 '13 at 11:39

answered Mar 11 '13 at 11:18

PSR

39,804
41
111
151

in case the user copies a large amount of contents into the textbox, it is better to use `>=` instead of `==` – Raptor Mar 11 '13 at 11:20
try by removing .next().can u show me the code – PSR Mar 11 '13 at 11:26
Code: ` - ` – Apb Mar 11 '13 at 11:32
@user2156244 i created link http://jsfiddle.net/khbEL/ see here it is working – PSR Mar 11 '13 at 11:34
is it working now for u – PSR Mar 11 '13 at 11:36

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

Yes. You would need to:

monitor the onkeydown event to prevent the characters from 'overflowing',
look up the next input field in your form - based on your own logic/structure - when such happens,
use the focus method to set the focus on it that next field.

edited May 23 '17 at 12:06

Community

1
1

answered Mar 11 '13 at 11:12

Grant Thomas

44,454
10
85
129

score 0 · Answer 4 · answered Mar 11 '13 at 11:13

0

Yes, you need to calculate the number of charecter inserted in the field by onkeyup event and if the number is equal to maxlength then set the focus to next field

answered Mar 11 '13 at 11:13

Sudip Pal

2,041
1
13
16

i used this function: `function moveOnMax(field,nextFieldID) { if(field.value.length >= field.maxLength) { document.getElementById(nextFieldID).focus(); } }` But its not working – Apb Mar 11 '13 at 11:18
you should make the `field` as object before finding the length. So before passing it into if clasue, create an object saying `document.getElementById(field)` – Sudip Pal Mar 11 '13 at 11:29

score 0 · Answer 5 · answered Mar 11 '13 at 11:17

0

you can use code like this using jquery. In this code it will move to #second field when text is larger then 20 characters

<input id="first"/>
<input id="second"/>
<script>
$(function() {
   $('#first').keypress(function() {
      var self = $(this);
      //wait until character is inserted
      setTimeout(function() {
         if (self.val().length > 20) {
            $('#second').focus();
         }
      }, 1);
   });
});
</script>

answered Mar 11 '13 at 11:17

jcubic

61,973
54
229
402

why are you using the setTimeout? – SwissCoder Nov 22 '22 at 17:07
@SwissCoder sorry I have no idea, it was created 9 years ago. Maybe it was not working without it. – jcubic Nov 23 '22 at 20:17

score 0 · Answer 6 · answered Mar 11 '13 at 11:30

First you need to hook into the onfocus event for the input to know you are starting the measuring. Then you need to check the length of the entered characters with the onkeyup event. Once your limit is reached you can call focus() on the next DOM element you want to move the cursor to. You will also need to use the onblur event to know that you have stopped measuring the length of an input.

For example, using jQuery;

<input id="inputA" type="text"/>
<input id="inputB" type="text"/>

<script>

var $input;

$('#inputA').focus(function() {
    $input = $(this);
});

$(window).keyup(function() {
    if($input && $input.val().length == 5) {
        $('#inputB').focus();
    }
});

$('#inputA').blur(function() {
    $input = null;
});

</script>

Using Javascript to Auto move cursor onto next form field

6 Answers6

Linked