OTP Input Complete User Interface

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">&ndash;</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();
				}
			}
		}
	});
});