关注第一个空输入答案

【问题标题】：Focus on the first empty input关注第一个空输入
【发布时间】：2015-08-13 00:28:51
【问题描述】：

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

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

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

【问题讨论】：

设置焦点后尝试return false;
它不工作。我已经试过了。我正在使用歌剧

标签： javascript focus html-input

【解决方案1】：

在您聚焦元素以打破$.each() 循环之后，只需return false;。目前，随着循环的继续，焦点将设置在您的 last 空元素上。

我们可以通过让回调函数返回 false 来在特定的迭代中打破 $.each() 循环。返回非 false 与 for 循环中的 continue 语句相同；它将立即跳到下一次迭代。

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

编辑，要清楚：

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

编辑，这样您就不必阅读所有的 cmets：

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

$('#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
});

【讨论】：

是的。我试过了。我什至使用preventDefault，但它不起作用。它只是因为错误而刷新页面
这行不通。我不知道是不是因为歌剧。但它确实不起作用
没有。我的意思是错误在我的代码中，因为页面只是刷新它不应该刷新。
您在提交时绑定了处理程序吗？
是的，我已经绑定了

【解决方案2】：

这里是原生 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;
  }
}

【讨论】：

【解决方案3】：

发生这种情况是因为您正在遍历所有输入元素并调用 .focus() 如果它没有值。如果用户名字段和密码字段都没有值，它将首先在用户名字段上调用.focus()，然后继续迭代并在密码字段上调用.focus()，这将焦点从用户名字段上移开.您想要的是在检测到第一个没有值的输入字段时停止迭代输入字段。要做到这一点，只需return false; 告诉 JQuery 的 each 停止迭代。

$('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 中运行。

【讨论】：

@sagay_paul 这对你有帮助吗？