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.
Pressing enter key should set focus to next text or numeric input field (product code or quantity), skipping buttons.
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.
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
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”
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[]" />
Try .keypress() and .focus() functions in jQuery.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With