当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

转载于:https://www.cnblogs.com/ppxyq/p/10114903.html