OTP INPUT
HTML CODE
<div class="prompt">
Enter the code generated on your mobile device below to log in!
</div>
<form method="get" class="digit-group" data-group-name="digits" data-autosubmit="false" autocomplete="off">
<input type="text" id="digit-1" name="digit-1" data-next="digit-2" class="iinp"/>
<input type="text" id="digit-2" name="digit-2" class="iinp" data-next="digit-3" data-previous="digit-1" />
<input type="text" id="digit-3" name="digit-3" class="iinp" data-next="digit-4" data-previous="digit-2" />
<input type="text" id="digit-4" name="digit-4" class="iinp" data-next="digit-5" data-previous="digit-3" />
</form>
CSS CODE
@import url('https://fonts.googleapis.com/css?family=Raleway:200');
$BaseBG: #0f0f1a;
body, html {
height: 100%;
margin: 0;
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
body {
background-color: $BaseBG;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.digit-group {
input {
width: 30px;
height: 50px;
background-color: lighten($BaseBG, 5%);
border: none;
line-height: 50px;
text-align: center;
font-size: 24px;
font-family: 'Raleway', sans-serif;
font-weight: 200;
color: white;
margin: 0 2px;
}
.splitter {
padding: 0 5px;
color: white;
font-size: 24px;
}
}
.prompt {
margin-bottom: 20px;
font-size: 20px;
color: white;
}
script
$('.digit-group').find('input').each(function() {
$(this).attr('maxlength', 1);
$(this).on('keyup', function(e) {
var parent = $($(this).parent());
if(e.keyCode === 8 || e.keyCode === 37) {
var prev = parent.find('input#' + $(this).data('previous'));
if(prev.length) {
$(prev).select();
}
} else if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
var next = parent.find('input#' + $(this).data('next'));
if(next.length) {
$(next).select();
} else {
if(parent.data('autosubmit')) {
parent.submit();
}
}
}
});
});