%h3 enter code
    %input{autofocus: "", maxlength: "1", placeholder: "#", type: "password"}/
    %input{maxlength: "1", placeholder: "#", type: "password"}/
    %input{maxlength: "1", placeholder: "#", type: "password"}/
    %input{maxlength: "1", placeholder: "#", type: "password"}/
      Valid Code:
      %strong 1234
View Compiled
@import compass

//  Google Web Font: Source Sans Pro

  box-sizing: border-box
  text-rendering: optimizeLegibility

  font-family: "Source Sans Pro", sans-serif
  text-align: center
  padding: 1em
  color: #ccc
  font-weight: 200

  width: 190px
  text-align: center
  margin: 0 auto
  position: absolute
  top: 50%
  left: 50%
  margin-left: -95px
  margin-top: -65px

  font-weight: 100
  font-size: 28px
  color: #ccc
  line-height: 36px
  margin-bottom: 1em

  width: auto
  &.success input
    color: #8CE62C
    border-color: #8CE62C

  font-family: "Source Sans Pro", sans-serif
  font-weight: 200
  width: 40px
  height: 50px
  border: 1px solid #CCCCCC
  display: block
  float: left
  margin-right: 10px
  outline: 0
  font-size: 28px
  color: #ccc
  line-height: 40px
  text-align: center
  cursor: pointer
    margin-right: 0
    color: #9B9B9B
    color: #0091FF
    border-color: #0091FF

  display: none

  padding-top: 2em
  clear: both
    list-style-type: none

  color: #777
  font-weight: 200
View Compiled
#   JQuery
#   JQuery AutoTab Magic

# Form Parent
form = $(".code_input")

# Form Inputs
formInputs = $(form).children "input"

# Valid Code
validCode = "1234"

#JQuery AutoTab to automatically move forward when maximum length of input is reached.

# Returns the code which is inputted into each of the form inputs
inputCode = ->
  code = [] # Blank array (probably a better way to do this
  $(formInputs).each -> # Selects each form input object
    code.push $(this).val() # Pushes each form input value to the [code] array

  code.join "" # Returns the code array in string form (joined)

# Checks the code which is returned from inputCode()
validateCode = ->
  c = inputCode() # Runs inputCode() to have a code string to validate
  if c is validCode # Checks code against validCode variable
    $(form).removeClass("error").addClass "success" # Adds success class and removes error class from form
    $(".hint").fadeOut() # Hides the hint
    false # End of successful code input
  else if c.length is 4 # Checks if code is 4 digits long
    $(".hint").fadeIn() # Shows the hint
    $(form).addClass("error").removeClass "success" # Adds error class, removes success class from form
    false # End of unsuccessful input

# Clears out all the inputs and sets the focus to the first one
clearInputs = ->
  $(formInputs).first().focus() # Set focus to first input
  $(formInputs).val "" # Sets input values to null
  $(form).removeClass() # Remove classes from form

# Initiates code validation if the key pressed isn't backspace or delete
$(formInputs).keyup -> # On keyup in any of the form inputs
  if event.keyCode is 8 or event.keyCode is 46 # Maps to the backspace and delete key
    clearInputs() # Clears the form
    false # End of backspace event
    validateCode() # Run validation function

# Clears form when clicking any of the form inputs
$(formInputs).click ->
  clearInputs() # Clears form
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Source+Sans+Pro:200

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery-autotab/1.9.2/js/jquery.autotab.js