Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 521
Ali Zia Avatar asked Oct 28 '16 12:10

Ali Zia


People also ask

How do you activate the next input field on Enter?

Pressing enter key should set focus to next text or numeric input field (product code or quantity), skipping buttons.

How do you know if input field is focused?

To check if an input field has focus with JavaScript, we can use the document. activeElement property to get the element in focus. to add an input. to check if the input element is focused.


5 Answers

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

like image 191
OK sure Avatar answered Oct 01 '22 07:10

OK sure


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”

like image 29
wscourge Avatar answered Sep 28 '22 07:09

wscourge


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[]" />
like image 34
Yosvel Quintero Arguelles Avatar answered Sep 27 '22 07:09

Yosvel Quintero Arguelles


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

like image 25
Rahul Salvi Avatar answered Sep 30 '22 07:09

Rahul Salvi


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

like image 29
Aroniaina Avatar answered Sep 27 '22 07:09

Aroniaina