CODEWITHSUNDEEP
javascriptjquery
Jack The Baker
Jack The Baker

Reputation: 1883

jQuery focus and select on next input not working

I use focus() and also select() to focus and select next element, but this work fine in desktop,and also chrome device view (mobile) but not working in smartphone like android (I tested in chrome browser), any idea how to solve this problem?

$('.verf-code input').on('keypress',function(e) {
  var key = e.which;

  if (key >= 48 && key <= 57) {
    $(this).addClass('hasCode').next('input').select().focus();
    return true;
  } else if (key == 8 || key == 46) {
    $(this).removeClass('hasCode');
  } else {
    return false;
  }

});
.hasCode {
border: 1px solid orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verf-code">
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

Upvotes: 0

Views: 228

Answers (1)

Younes Bennour
Younes Bennour

Reputation: 759

Try this:

$(".verf-code input").on("keyup", function (e) {
    var key = e.which;
    if ($(this).val() !== '') {
         $(this).addClass('hasCode').next('input').select().focus();
    }else if(key == 8 || key == 46){
        $(this).removeClass('hasCode');
    }
});
    .hasCode {
        border: 1px solid orange;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type=number] {
      -moz-appearance: textfield;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verf-code">
    <input type="number" />
    <input type="number" />
    <input type="number" />
    <input type="number" />
</div>

Upvotes: 1

Related Questions