自动选择下一个输入字段并返回

时间:2019-01-17 15:07:17

标签: javascript jquery

输入后,用户将无法返回更改输入。

Coefficient
$("form").on("keyup change paste", function(e) {
  e.preventDefault();

  var a = $(this).find("input[type='text'].a");
  var b = $(this).find("input[type='text'].b");
  var c = $(this).find("input[type='text'].c");
  var d = $(this).find("input[type='text'].d");
  var e = $(this).find("input[type='text'].e");
  var f = $(this).find("input[type='text'].f");

  a.val(a.val().replace(/[^0-9]/g, ""));
  b.val(b.val().replace(/[^0-9]/g, ""));
  c.val(c.val().replace(/[^0-9]/g, ""));
  d.val(d.val().replace(/[^0-9]/g, ""));
  e.val(e.val().replace(/[^0-9]/g, ""));
  f.val(f.val().replace(/[^0-9]/g, ""));

  if (a.val().length == a.attr('maxlength')) {
    a.next("input").focus();
  }
  if (b.val().length == a.attr('maxlength')) {
    b.next("input").focus();
  }
  if (c.val().length == a.attr('maxlength')) {
    c.next().next("input").focus();
  }
  if (d.val().length == a.attr('maxlength')) {
    d.next("input").focus();
  }
  if (e.val().length == a.attr('maxlength')) {
    e.next("input").focus();
  }
  if (f.val().length == a.attr('maxlength')) {
    f.next("input").focus();
  }
});
input {
  width: 20px;
  text-align: center;
}

那怎么办?

上方还有一种更优雅的方法吗?


实时:jsFiddle

3 个答案:

答案 0 :(得分:2)

每当您发现自己发现非常重复的代码时,请始终考虑使用LOOP。

以下内容将允许用户编辑其值。这也大大减少了您的代码。

$('form').on('input', e => {
    var letters = ['a', 'b', 'c', 'd', 'e', 'f'];
    letters.forEach(letter => {
        let field = $(e.target);
        field.val(field.val().replace(/[^0-9]/g, ''));
        if(field.val().length == field.attr('maxlength')) { field.nextAll('input').first().focus(); }
    });
});

Fiddle

注意:

  • 收听输入事件;它的优点是可以覆盖您正在听的所有事件,并且至关重要的是,在按下键后触发 (这意味着您可以肯定地从该字段中获取最新,完整的值)
  • 避免重复代码;循环使我们可以一次而不是重复地编写业务逻辑
  • 没有必要阻止事件的默认操作
  • 通过使用nextAll('input').first(),我们可以确保获得下一个input,无论是下一个同级兄弟,还是第三个输入的情况,都是由另一种元素分隔的

答案 1 :(得分:0)

我的想法是要集中精力,在到达最后一个时循环。如果有新条目,请替换号码。

AWS_*
// init the html
const nbInput = 6;

let html = '';

for (let i = 0; i < nbInput; i += 1) {
  html += `<input type="text" name="code" maxlength="1" autocomplete="off" number="${i}">`;
}

$('form').html(html);

$('form input').on('keypress', function(e) {
  e.preventDefault();
  
  // Ignore bad values
  if (/^[^0-9]$/g.test(String.fromCharCode(e.which))) {
    return;
  }

  // Replace the actual value with the keypressed one
  $(this).val(String.fromCharCode(e.which));

  // Reset & focus next
  if ($(this).val() !== '' && Number($(this).attr('number')) < (nbInput - 1)) {
    $(`input[number=${Number($(this).attr('number')) + 1}]`).focus();
  } else {
    // Focus the first item when we finished
    $('input[number="0"]').focus();
  }
});
input {
  width: 20px;
  text-align: center;
}

答案 2 :(得分:0)

清除输入的焦点就可以了。 (我不太使用jQuery,因此如果语法不正确,请您道歉。)

$("form").focus(function() {

    var a = $(this).find("input[type='text'].a")
    var b = $(this).find("input[type='text'].b") // ...etc  

    a.val("");
    b.val(""); // ...etc
});

也就是说,Utkanos对循环是处理两个问题(自动前进和允许进行编辑)的正确方法是100%正确的。