All geek questions in one place

Navigating input when filling or starting

I am implementing two-factor authentication on my site and I would create a page such as a 2-factor apple authentication page with 6 text entries, one for each code. These inputs allow you to move forward and forward if I fill them out or empty them. I tried to do this, but I had a lot of problems.

  • When all the inputs are filled, and I am in the last and try to delete using the "backspace", it deletes the previous, not the last.
  • When I move the cursor to a filled input, it automatically moves to the 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>
Run code
+4
source share
3 answers

, :

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

False.

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

:

$(".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>
+1

$(".digit-input").keyup(function(e) { console.log( e.which)
  if (this.value.length == this.maxLength && e.which!=37) {
    $(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>

, .

0

It is not perfect, but something like that.

$(function(){
	nextEmpty(); //select first empty field
	$(".digit-input").on("input", handleInput) //for values
  		         .on("keydown", handleKey); //for backspace
  
  function handleInput(e){    
    var len = $(this).val().length;
    if(len){
      if( $(e.currentTarget).index() == 5 ){
   	setTimeout(function(){
          alert( "code is:" + getCode() ); //all fields are filled
        }, 10);
      }else{
      	next(e);
      }
    }
  }
  function handleKey(e){
    var len = $(this).val().length;
    if(e.which == 8 && len === 0){
    	setTimeout(function(){ prev(e); }, 10);
    }
  }
  
  function prev(e){
    var $cur = $(e.currentTarget);
    var target = $cur.index() - 1;
    $(`.digits input:eq(${target})`).focus().select();
  }
  function next(e){
    var $cur = $(e.currentTarget);
    var target = $cur.index() + 1;
    $(`.digits input:eq(${target})`).focus().select();
  }
  function nextEmpty(){
   $(".digits input[value='']").filter(":first").focus();
  }
  function getCode(){
    var sb = "";
    $('.digits input').each(function(){
     sb += $(this).val();
    });
    return sb;
  }
});
<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" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit2" name="digit2" class="digit-input" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit3" name="digit3" class="digit-input" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit4" name="digit4" class="digit-input" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit5" name="digit5" class="digit-input" value="" size="1" maxlength="1" autocomplete="off" type="text">
  <input id="digit6" name="digit6" class="digit-input" value="" size="1" maxlength="1" autocomplete="off" type="text">
</div>
Run code
0
source

Source: https://habr.com/ru/post/1682483/

More articles:


All Articles