JqueryNo Comments

default thumbnail

We can focus next input field on keyup in jquery. After putting value in first input, next input will get focused. We can select the keys on which keys you want to focus the input field

HTML

<div class="form-group otp-list">
    <input type="hidden" class="form-control" value="" id="hid-mobile">	
    <input type="text" class="form-control" required id="verifyotp1" maxlength="1">
    <input type="text" class="form-control" required id="verifyotp2" maxlength="1">
    <input type="text" class="form-control" required id="verifyotp3" maxlength="1">
    <input type="text" class="form-control" required id="verifyotp4" maxlength="1">
    <input type="text" class="form-control" required id="verifyotp5" maxlength="1">
    <input type="text" class="form-control" required id="verifyotp6" maxlength="1">
</div>

CSS

otp-list input{ float:left; width:14.6%; margin:0px 1%; border-radius:0px; background:none; border:none; box-shadow:none; border-bottom:1px #444 solid; color:#444; text-align:center; }

Jquery

$(".otp-list input").keyup(function(){
 var key = event.keyCode || event.charCode;
 if( key == 48 || key == 49 || key == 50 || key == 51 || key == 52 || key == 53 || key == 54 || key == 55 || key == 56 || key == 57 || key == 96 || key == 97 || key == 98 || key == 99 || key == 100 || key == 101 || key == 102 || key == 103 || key == 104 || key == 105 ){
 $(this).next("input[type='text']").focus();
 }
 })

Be the first to post a comment.

Add a comment