<div class="container text-center mb-5 mt-5">
<div class="row">
<div class="col-md-12">
<h4><a href="https://codepen.io/piyushpd/pen/MWewXBG" target="_blank">OTP Input Section</a></h4>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group text-center">
<label class="margin-align">Enter the Code</label>
<div class="form-group-input otp-form-group mb-3">
<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
</div>
</div>
</div>
</div>
</div>
<div id="errmsg" class="text-center"></div>
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
button:focus,
input:focus{
outline: none;
box-shadow: none;
}
a,
a:hover{
text-decoration: none;
}
body{
font-family: 'Roboto', sans-serif;
}
/*------------------ */
.otp-form-group{
display: flex;
align-items: center;
justify-content: center;
}
.otp-inputbar{
width: 50px;
height: 50px;
border-radius: 15px;
text-align: center;
margin-right: 10px;
font-size: 16px;
color: #333;
}
#errmsg
{
color: red;
}
// --------otp section------
$(".otp-inputbar").keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
$(".otp-inputbar").on("keyup keydown keypress", function (e) {
if ($(this).val()) {
$(this).next().focus();
}
var KeyID = e.keyCode;
switch (KeyID) {
case 8:
$(this).val("");
$(this).prev().focus();
break;
case 46:
$(this).val("");
$(this).prev().focus();
break;
default:
break;
}
});