A Pen by Theodore Vorillas.

Fixed-length-password-field-concept..markdown

Fixed length password field concept.

Another small UI/UX experiment. Password fields are quite annoying to fill. In this concept I have visualised the required password's length using dashes.

A Pen by Theodore Vorillas on CodePen.

License.

index.html

<!-- Type abcd to unlock-->
<div class="clr"><small>Type 1234 to unlock</small></div>
<span><input type="password" maxlength="4"/></span>

script.js

$( document ).ready(function() {
   $("input").focus();
  
  $("input").on("keyup",function(){
    if( $("input").val()=="1234"){
      $("span").addClass("active")
    }else{
      $("span").removeClass("active");
    }
  })
});

style.scss

@import "compass/css3";
body{
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: bold;
  font-family:Arial, sans-serif;
  font-smoothing: antialiased;
  perspective: 700px;
  transform-style: preserve-3d;
  background-color: #ffffff;
@include filter-gradient(#ffffff, #eae0de, horizontal);
@include background-image(radial-gradient(center, ellipse cover, #ffffff 0%,#eae0de 100%));
}
.clr{
  height: 1px; margin-top: 200px; clear: both; text-align: center; font-weight: 100;     font-size: 12px; text-indent: -18px;color:#300031;
}
input{
  position:relative;
  top:50%;
  border:0;
  background:none;
  font-size:60px;
  line-height:30px;
  width: 140px;
  display: inline-block;
  z-index:1000;
  color:#300031;
  
  &:focus{outline:none;}
}
span{
  position:relative;
  color:#DB3665;
  margin-top:200px;
  display:inline;
  
  &:before,&:after{position:absolute;}
  &:before{
    content: "\f023";
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    left: -22px;
    top: -13px;
    font-size: 20px;
    
  }
  &:after{
    content: "----";
    top: -8px;
    left: 4px;
    width: 135px;
    z-index: 100;
    height: 10px;
    font-size: 69px;
    line-height: 0px;
    letter-spacing: 10.7px;
    text-align: left;
    text-indent: 0;
    color: #DB3665;
  }
}

span.active{
 color: #00700C;
  &:before{content: "\f09c";}
}