当input框输入到限定长度时,自动focus下一个input框

 需求背景

需要输入一串15位的数字,但是要分为3个输入框,每个输入框限定长度5位,当删除当前输入框的内容时,focus到上一个输入框:

实现方法

var field = $('.phone-field');
field.on('keyup', 'input.phone-input', function(e) {
  var key = e.keyCode || e.charCode;
  var inputs = $('input.phone-input');
  if ($(this).val().length === this.size) {
    inputs.eq(inputs.index(this) + 1).focus();
  }
  
  if ((key === 8 || key === 46) && $(this).val().length === 0) {
    var indexNum = inputs.index(this);
    if (indexNum != 0) {
      inputs.eq(inputs.index(this) - 1).focus();
    }
  }
})

点下面链接查看效果

https://codepen.io/pprachel/pen/maevdK

猜你喜欢

转载自www.cnblogs.com/ppxyq/p/10114903.html
今日推荐