Setting focus to next input

Question

Currently I am creating a page. Some of the input fields have maxlength being defined, for such fields, I would like to make them possible to move focus to the next input when maxlength has reached.

Here I have the following code segment:

$("form input[type=text]").on('input',function () { if($(this).val().length == $(this).attr('maxlength')) { $(this).next("input").focus(); } });

This code works fine in Chrome and Firefox, however, it does not work in IE. Therefore I search for the solution to tackle the issue. Some suggest to use the setTimeout() method to solve the problem. So i modify the code to the following:

setTimeout(function(){ $("form input[type=text]").on('input',function () { if($(this).val().length == $(this).attr('maxlength')) { $(this).next("input").focus(); } }); }, 3000);

But it still does not work in my IE environment. In order to solve the issue, I have tried setInterval() too. None of the two helps solving the problem. Therefore I would like to ask how can I achieve my objective. Or the failure is only caused by I have used the setTimeout() method in a wrong way?

which version of IE do you use? as you can read here msdn.microsoft.com/en-us/library/ie/gg592978.aspx oninput event works in IE9+ — Oleg
– Oleg, Commented Jan 17, 2014 at 9:40
Sadly, based on requirements, the page I am building needs to support IE7 and IE8 too. — Conrad
– Conrad, Commented Jan 17, 2014 at 9:42

Oleg · Accepted Answer · 2014-01-17 11:54:42Z

It seems that IE8 and older don't support oninput event, as you can read here

But you can replace this line:

$("form input[type=text]").on('input', function ()

with this one:

$("form input[type=text]").on('keyup paste', function ()

I believe it should work even in old Internet Explorers

Edit

It worth to note that when paste event is triggering, textfield's value is not being updated immediatelly. So you have to wait an instant. The code would look like this:

$("form input[type=text]").on('keyup paste', function () { var _this = this; setTimeout(function() { if($(_this).val().length == $(_this).attr('maxlength')) { $(_this).next("input").focus(); } }, 10); //minimal setTimeout delay });

In setTimeout callback this refers to window object, so you should "remember" your textfield in _this variable, then use it in the callback

Sorry for late reply, I was busy during my weekend. Your solution is correct, the problem is caused by old verion IE does not support oninput. Thank you very much!

Milind Anantwar · Accepted Answer · 2014-01-17 09:30:37Z

1

For IE you need to use a settimeout function due to it being lazy, for example:

 setTimeout(function() { $(this).next("input").focus(); }, 10);

answered Jan 17, 2014 at 9:30

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

10 Comments

Oleg Over a year ago

but in this case this would be the window object

Milind Anantwar Over a year ago

@Zub:i can not understand what you mean

Oleg Over a year ago

try this code: setTimeout(function() {alert(this)}, 10). you will see something like: [object Window]. but this should be the textfield

Conrad Over a year ago

i made the second code segment based on the online reference i have read, but still IE does not respond to my code. Moreover, I have set another function inside setTimeout()/setInterval(), so based on my understanding, this inside the sub function should be the object trigger the sub-function, isn't it?

Conrad Over a year ago

setTimeout(function() { $(id).next("input").focus(); }, 10); I have checked this works fine, however, I still have to check condition before moving to the next input. when I add the condition, it does not work.

|

Collectives™ on Stack Overflow

Setting focus to next input

2 Answers 2

1 Comment

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Related