javascript - 焦点事件在 HTML 表单中不起作用

标签 javascript jquery html

我的 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页面。指针不聚焦在电子邮件上。如何纠正?

最佳答案

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>

关于javascript - 焦点事件在 HTML 表单中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41647292/

相关文章:

javascript - 我应该使用 self 还是 window 来引用全局范围?

javascript - javascript 中的 WOEID 天气预报(使用 YQL 或 rss)?

php - XPath 选择属性名称开头的节点

php - 使用 AJAX (Javascript) 将查询传递到函数中

javascript - 谷歌浏览器打印预览第一次不加载页面

javascript - jQuery 1.4.1 中的实时更改处理程序仍然并不总是适用于 IE 中的选择元素

javascript - Bootstrap 轮播在鼠标悬停或单击之前不会滑动

jquery - 向下滚动时出现并缩放

css - 如何在 JQM 1.4.2 中修改图标

javascript - 在 Chart.js 中绘制线上的点