Show input values on other input-CodePudding

This is a verification code form, and I want to show entered number on yellow input, but the problem is when you enter 4 numbers then enter new numbers or update old numbers yellow input not updated, and I want to show number on yellow input only if all 4 inputs are has value, if not, clear yellow input.

var code = [];
$('.verf-code input').keyup(function(e) {
  var key = e.which;
  var val = $(this).val();

  $(this).each(function() {
    if (key >= 48 && key <= 57) {
      $(this).next('input').select().focus();
      code.push(val);
      return true;
    } else {
      return false;
    }
  });
  if (code.length <= 4) {
    $('.verification-code').val(code.join(''));
   
  } else {
    code = [];
  }

});

.verification-code {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="verf-code"><input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" />
  <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" />
  <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" />
  <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" /></div>

<input type="text" class="verification-code">

CodePudding user response：

You don't need extra loop (each) in your keyup event. You need to update code array in each position I use index to do that.

Here is working sample:

var code = [];
$('.verf-code input').keyup(function (e) {
    var key = e.which;
    var val;

    if (key >= 48 && key <= 57) {
        val = $(this).val();
    }
    else
        val = "-1";
    $(this).next('input').select().focus();
    code[$(this).index()] = (val);
    if (code.length == 4 && !code.includes("-1"))
        $('.verification-code').val(code.join(''));
    else
        $('.verification-code').val('');
});

.verification-code {
     background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="verf-code">
    <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" />
    <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" />
    <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" />
    <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" />
</div>

<input type="text" class="verification-code">

CodePudding user response：

var code = [];
$('.verf-code input').on("input", function(e) {
  this.value = this.value.match(/\d/) || "";
  if (this.value.length === 1) {
    $(this).next('input').select().focus();
    code[$(this).index()] = this.value
    const vc = code.join('')
    $('.verification-code').val(vc.length === 4 ? vc : '');
  }
});

.verification-code {
  background: yellow;
  width: 72px;
}

.verf-code {
  width: 80px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="verf-code">
  <input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="\d" tabindex="1" />
  <input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="\d" tabindex="2" />
  <input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="\d" tabindex="3" />
  <input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="\d" tabindex="4" />

  <input type="text" class="verification-code" readonly>
</div>

CodePudding user response：

I'd use a data-id attribute to keep track of which input has a value.

Then I'd filter the code array to remove any empty values, and use that to determine if your verification input should have a value:

var code = [];
$('.verf-code input').keyup(function(e) {
  var key = e.which;
  var val = $(this).val();

  
  code[$(this).attr("data-id")] = $(this).val();
  
  $(this).each(function(index) {
    if (key >= 48 && key <= 57) {
      $(this).next('input').select().focus();
      
      return true;
    } else {
      return false;
    }
    
  });
  
    var filtered = code.filter(function (el) {
    return el != "";
  });
  
  if (filtered.length == 4) {
    $('.verification-code').val(code.join(''));
   } else {
   $('.verification-code').val('');
   }
    
});

.verification-code {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="verf-code">
  <input data-id="0" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" />
  <input data-id="1" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" />
  <input data-id="2" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" />
  <input data-id="3" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" />
</div>

<input type="text" class="verification-code">