PIN auto Insert and activate button

by Faisal Khan Janjua

HTML

<div class="loginControls">
  <div class="pinInputs">
    <input type="text" value="" maxlength="1" />
    <input type="text" value="" maxlength="1" />
    <input type="text" value="" maxlength="1" />
    <input type="text" value="" maxlength="1" />
  </div>
  <div class="bi-btns">
    <button class="btn btn-md">Back</button>
    <button class="btn btn-md btn-verifyPin" disabled="disabled">Verify</button>
  </div>
</div>

<p></p>
<span></span>

SCSS

input {
  float: left;
  margin: 10px 10px 10px 0;
  width: 50px;
}
.btn {
	z-index: 1;
	color: #FFF;
	font-size: 13px;
	font-weight: 500;
	overflow: hidden;
	padding: 9px 14px;
	position: relative;
	background: #F00;
	border-radius: 2px;
  cursor: pointer;
	text-transform: uppercase;
	border: 1.5px solid #F00;
  &[disabled]{
    opacity: 0.4;
    cursor: not-allowed;
  }
}
.bi-btns {
  clear: both;
  width: 50%;
  float: left;
}
p, span {
  float: left;
  width: 100%;
}

JavaScript

var activeBtn = true;
var counter = 1;
jQuery(document).on('keyup', '.loginControls .pinInputs input', function(e){
  if(jQuery(this).val().length > 0 && e.keyCode != 37 && e.keyCode != 8 ){
    jQuery(this).next().focus();
  }
  if(e.keyCode == 39){
    jQuery(this).next().focus();
  }
  if(e.keyCode == 8 || e.keyCode == 37){
    jQuery(this).prev().focus();
  }
  counter = 0;
  jQuery('.loginControls .pinInputs input').each(function(){
    if(jQuery(this).val().length<1){activeBtn=false; return false;}else{activeBtn = true;}
    counter++;
    $('span').text(counter);
  });
  $('p').text(activeBtn);
  if(activeBtn){
    jQuery('.loginControls .btn-verifyPin').removeAttr("disabled");
  }
  else {
    jQuery('.loginControls .btn-verifyPin').attr("disabled", "disabled");
  }
});