Here is a working demo with HTML, CSS, and jQuery Script for the complete functional OTP user interface for you web pages.
DEMO
See the Pen OTP Input by Puneet Sharma (@webdevpuneet) on CodePen.
HTML
<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" />
<input type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" />
<input type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" />
<span class="splitter">–</span>
<input type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" />
<input type="text" id="digit-5" name="digit-5" data-next="digit-6" data-previous="digit-4" />
<input type="text" id="digit-6" name="digit-6" data-previous="digit-5" />
</form>
CSS
@import url("https://fonts.googleapis.com/css?family=Raleway:200");
body, html {
height: 100%;
margin: 0;
font-family: "Raleway", sans-serif;
font-weight: 200;
}
body {
background-color: #0f0f1a;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.digit-group input {
width: 30px;
height: 50px;
background-color: #18182a;
border: none;
line-height: 50px;
text-align: center;
font-size: 24px;
font-family: "Raleway", sans-serif;
font-weight: 200;
color: white;
margin: 0 2px;
}
.digit-group .splitter {
padding: 0 5px;
color: white;
font-size: 24px;
}
.prompt {
margin-bottom: 20px;
font-size: 20px;
color: white;
}
jQuery
you will need to include jQuery first for this script to run before the following 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();
}
}
}
});
});