javascript - Move through input text when fill or empty them -


i'm implementing 2-factor authentication on website login , create page 2-factor authentication page of apple 6 text input, 1 each code. these input permit move ahead , forward if fill or empty it. tried had lot of problems.

  1. when inputs filled, , in last 1 , try delete "backspace", remove previous , not last.
  2. when move cursor on filled input, goes automatically next.

$(".digit-input").keyup(function() {    if (this.value.length == this.maxlength) {      $(this).next('.digit-input').focus();    }    verificasepieno();  });    $(".digit-input").keydown(function(e) {    if ((e.which == 8 || e.which == 46) && $(this).text() == "") {      $(this).prev('.digit-input').focus();    }    verificasepieno();  });    function verificasepieno() {    if ($("#digit1").text() != "" && $("#digit2").text() != "" && $("#digit3").text() != "" && $("#digit4").text() != "" && $("#digit5").text() != "" && $("#digit6").text() != "") {      $("#submitbtn").removeclass("disabled");    } else {      $("#submitbtn").addclass("disabled");    }  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="digits">    <input id="digit1" name="digit1" class="digit-input" data-indx="0" data-next-id="digit2" value="" size="1" maxlength="1" autocomplete="off" type="text">    <input id="digit2" name="digit2" data-prev-id="digit1" class="digit-input" data-indx="1" data-next-id="digit3" value="" size="1" maxlength="1" autocomplete="off" type="text">    <input id="digit3" name="digit3" data-prev-id="digit2" class="digit-input" data-indx="2" data-next-id="digit4" value="" size="1" maxlength="1" autocomplete="off" type="text">    <input id="digit4" name="digit4" data-prev-id="digit3" class="digit-input" data-indx="3" data-next-id="digit5" value="" size="1" maxlength="1" autocomplete="off" type="text">    <input id="digit5" name="digit5" data-prev-id="digit4" class="digit-input" data-indx="4" data-next-id="digit6" value="" size="1" maxlength="1" autocomplete="off" type="text">    <input id="digit6" name="digit6" data-prev-id="digit5" class="digit-input" data-indx="5" value="" size="1" maxlength="1" autocomplete="off" type="text">  </div>

i think of problems come wrong condition :

$("#digit").text() != "" 

this expression return false. use instead:

$("#digit").val() != "" 

your code seems work:

$(".digit-input").keyup(function() {    if (this.value.length == this.maxlength) {      $(this).next('.digit-input').focus();    }    verificasepieno();  });    $(".digit-input").keydown(function(e) {    if ((e.which == 8 || e.which == 46) && $(this).val() == "") {      $(this).prev('.digit-input').focus();    }    verificasepieno();  });    function verificasepieno() {    if ($("#digit1").val() != "" && $("#digit2").val() != "" && $("#digit3").val() != "" && $("#digit4").val() != "" && $("#digit5").val() != "" && $("#digit6").val() != "") {      $("#submitbtn").removeclass("disabled");    } else {      $("#submitbtn").addclass("disabled");    }  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="digits">    <input id="digit1" name="digit1" class="digit-input" data-indx="0" data-next-id="digit2" value="" size="1" maxlength="1" autocomplete="off" type="text">    <input id="digit2" name="digit2" data-prev-id="digit1" class="digit-input" data-indx="1" data-next-id="digit3" value="" size="1" maxlength="1" autocomplete="off" type="text">    <input id="digit3" name="digit3" data-prev-id="digit2" class="digit-input" data-indx="2" data-next-id="digit4" value="" size="1" maxlength="1" autocomplete="off" type="text">    <input id="digit4" name="digit4" data-prev-id="digit3" class="digit-input" data-indx="3" data-next-id="digit5" value="" size="1" maxlength="1" autocomplete="off" type="text">    <input id="digit5" name="digit5" data-prev-id="digit4" class="digit-input" data-indx="4" data-next-id="digit6" value="" size="1" maxlength="1" autocomplete="off" type="text">    <input id="digit6" name="digit6" data-prev-id="digit5" class="digit-input" data-indx="5" value="" size="1" maxlength="1" autocomplete="off" type="text">  </div>


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -