CODEWITHSUNDEEP
javascriptjqueryhtml
Ali Zia
Ali Zia

Reputation: 3875

How to focus next input field on keypress

I am making a mobile application. I want to implement this function where on pressing the key, the next input field is focused. I tried many things but none seem to be working. This is my code. I tried using onClick but when i touch it, it goes to the next field.

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

I want a pure Jquery or Javascript solution. Thanks in advance.

Upvotes: 8

Views: 36412

Answers (6)

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

JavaScript and events keypress and focus and also key numbers validation:

document
  .querySelectorAll('.mobile-verify.pass')
  .forEach(el => el.onkeyup = e => e.target.value && el.nextElementSibling.focus())
input {
  display: flex;
  margin: 4px 0;
}
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

Upvotes: 6

Rahul Salvi
Rahul Salvi

Reputation: 364

Try .keypress() and .focus() functions in jQuery.

Upvotes: 3

wscourge
wscourge

Reputation: 11281

Use .next() and .trigger():

$(".mobile-verify.pass").on("keypress", function(e){
  $(this).next().trigger("focus");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" class="mobile-verify pass" name="code[]" />
<input type="number" class="mobile-verify pass" name="code[]" />
<input type="number" class="mobile-verify pass" name="code[]" />
<input type="number" class="mobile-verify pass" name="code[]" />

Side note: Find another solution for the maxlength attribute functionality, as per maxlength ignored for input type=“number”

Upvotes: 6

Marcus Ekstr&#246;m
Marcus Ekstr&#246;m

Reputation: 480

Others have already written the solutions. I just wanted to add that the part 

[].slice.call

is what solved my problem. I couldn't focus an element because it was of type Element, and not HtmlElement. But somehow that part of code is converting my querySelectorAll list of Elements to HtmlElements.

Thank you Yosvel Quintero

Upvotes: -1

Aroniaina
Aroniaina

Reputation: 1252

Use .keypress() and .focus()

The snippet : 

$(document).ready(function (){
  $("input.mobile-verify.pass").keypress(function(){
    $(this).next().trigger('focus');
    //or $(this).next().focus();	
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

With full JS

var allElements = document.querySelectorAll('.mobile-verify.pass');
var i;
for (i = 0; i < allElements.length; i++) {
  var el = allElements[i];
  el.addEventListener("keypress", function () {
    this.nextSibling.nextSibling.focus();
  });
}
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

NB : if you ask, why 2 nextSibling, the answer is that the first sibling is the text representing the small space between 2 elements

Upvotes: 1

OK sure
OK sure

Reputation: 2646

How about:

$('input.mobile-verify.pass').on('keyup', function() {
    if ($(this).val()) {
        $(this).next().focus();
    }
});

So on key up, if there is a value, focus the next. Using keyup allows you to validate the contents rather than skipping right away. They might switch to number mode on iOS for example which would trigger the focus if you simply use keypress.

Codepen: http://codepen.io/anon/pen/qaGKzk

Upvotes: 14

Related Questions