专注于第一个空输入

Question

我正在尝试将第一个空输入元素集中在第一次提交时，但是当电子邮件和密码输入为空时，它始终首先关注密码（后者）输入。

如何以适合所有浏览器的方式关注第一个空输入？

 $('input').each(function() {
      if ($(this).val() == '') {
          this.focus();
      }
 });

Answer 1

这是因为您正在迭代所有输入元素并在没有值的情况下调用.focus()。如果用户名字段和密码字段都没有值，它将首先在用户名字段上调用.focus()，但随后它将继续迭代并在密码字段上调用.focus()，这会使焦点消失从用户名字段。你想要的是当你检测到没有值的第一个字段时停止迭代输入字段。要做到这一点，只需return false;告诉JQuery各自停止迭代。

$('input').each(function(){
  if($(this).val() == ''){
    this.focus();
    return false;
  }
});

为了进行比较，请参阅此演示：

你的方式：http://codepen.io/Chevex/pen/XbpeMd
使用return false;：http://codepen.io/Chevex/pen/VLPMpr

您可以在第一个演示中看到您的错误，然后在第二个演示中修复了它。您可以在任何浏览器中加载这些演示，并查看它是否有效。

编辑：这是在Opera工作。

Answer 2

在关注元素以打破return false;循环后，只需$.each()。当循环继续时，焦点将设置为 last 空元素。

  

我们可以通过使回调函数返回false来在特定迭代中中断$ .each（）循环。返回非false与for循环中的continue语句相同;它将立即跳到下一次迭代。

来源：https://api.jquery.com/jquery.each/

编辑，要明确：

$('input').each(function() {
    if ($(this).val() == '') {
        this.focus();
        return false;
    }
});

编辑，因此您无需阅读所有评论：

完整的解决方案是在event.preventDefault()处理程序中使用onSubmit，然后检查输入中的空值。 然后，当然需要进一步处理（如：验证并最终将其提交到（服务器端）应用程序）输入。

$('#loginForm').on('submit',function (e) {
    e.preventDefault();

    // focus first empty input
    $('#loginForm input').each(function() {
        if ($(this).val() == '') {
            this.focus();
            return false;
        }
    });

    // further input processing
});

Answer 3

这是在vanilla JavaScript：

var input = document.getElementsByTagName('INPUT');
for (var i = 0, n = input.length; i < n; i = i + 1) {
  // may also need to test for input[i].type
  if (!input[i].value) {
    input[i].focus();
    break;
  }
}