焦点事件在 HTML 表单中不起作用答案

【问题标题】：Focus event not working in HTML form焦点事件在 HTML 表单中不起作用
【发布时间】：2017-01-14 06:05:28
【问题描述】：

我的 HTML 代码是

<body>
    <form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
        <input type="hidden" value="2" name="Tab" id="Tab">
        <div class="row underlinDv">
            <div class="col-sm-4">
                Your Email :
            </div>
            <div class="col-sm-8">
                <input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
            </div>
        </div>
        <!--18-->
        <div class="row underlinDv">
            <div class="col-sm-8 col-md-offset-4">
                <input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
            </div>
        </div>
    </form>
    <script>
    function search() {
        var Tab = document.getElementById("Tab").value;
        alert(Tab);
        var Eamillogin = document.getElementById("UEmailLogin").value;
        if (Eamillogin == "") {
            alert("please enter email");
            Eamillogin.focus();
        }
    }
    </script>
</body>

当我点击提交按钮时，JavaScript 警报显示“请输入电子邮件”。它工作正常。但是Eamillogin.focus(); 不起作用。显示警报后，表单自动指向 test1.php 页面。指针不关注电子邮件。如何纠正？

【问题讨论】：

Tushar 已回答 + 不要使用警报进行调试，它会打乱聚焦顺序。您可以改用console.log。此外，如果您不想提交表单，您必须取消提交，这会重新加载页面作为服务器响应。

标签： javascript jquery html

【解决方案1】：

Eamillogin 变量包含#UEmailLogin 元素的值。

要将焦点设置在元素上，请使用element.focus();

这里是更新的代码

var Eamillogin = document.getElementById("UEmailLogin"); // Removed .value from here
if (Eamillogin.value === "") {     // Added .value here
    alert("please enter email");
    Eamillogin.focus();            // Focus element
}

function search() {
  var Tab = document.getElementById("Tab").value;

  var Eamillogin = document.getElementById("UEmailLogin");
  if (Eamillogin.value === "") {
    alert("please enter email");
    Eamillogin.focus();
  }
}

<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
  <input type="hidden" value="2" name="Tab" id="Tab">
  <div class="row underlinDv">
    <div class="col-sm-4">
      Your Email :
    </div>
    <div class="col-sm-8">
      <input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
    </div>
  </div>
  <!--18-->
  <div class="row underlinDv">
    <div class="col-sm-8 col-md-offset-4">
      <input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
    </div>
  </div>
</form>

【讨论】：

当我删除
它工作正常。但是当我使用表单元素指针不会在表单上中继时，它会重定向到 test1.php 页面
@Nidhi 要取消无效表单值的表单提交，请在提交按钮的onsubmit 或onclick 上使用return search()，并从处理程序中添加return false; 以阻止表单提交。见How to prevent form from being submitted?