<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" />
  <input type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" />
</form>
@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;
}
View Compiled
$('.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();
        }
      }
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js