即使返回 False，Chrome 警报框也会提交页面答案

【问题标题】：Chrome Alert Box Submits Page Even if Returning False即使返回 False，Chrome 警报框也会提交页面
【发布时间】：2016-04-30 06:14:38
【问题描述】：

在我的应用程序中，我有一个用于搜索项目的文本框。在此文本框中，我希望用户在搜索之前必须输入至少 2 个字符。如果少于 2 个字符，那么我想显示一个简单的警告框，告诉用户输入至少 2 个字符。在我的文本框代码看起来像：

function checkSearchLen(obj, defaultEnterButton) {
  if (obj.value == 'Search') obj.value = '';

  if (obj.value.length < 2 && event.keyCode == 13) {
    event.returnValue = false;
    event.cancel = true;
    alert('Please ENter at Least 2 Characters');
    //return false;
    obj.select();
    obj.focus();
    return false;
  } else
    doEnterKey(defaultEnterButton);

}

function doEnterKey(s) {
  if (event.keyCode == 13) {
    event.returnValue = false;
    event.cancel = true;
    document.getElementById(s).click();
  }
}

&lt;input class="searchtext" id="txtSearch" value="Search" onfocus="this.value = '';this.style.color='black';this.style.fontStyle='normal';" onkeydown="checkSearchLen(this,'MenuBar_imgSearchGo');" name="txtSearch" /&gt;

在我的 javascript 中，用户每次击键时的函数都会检查被按下的 keyCode 以查找“Enter”输入。如果用户按下“Enter”并且文本框中的字符数小于 2，那么它应该提醒用户并返回 false。但是无论用户按下“Enter”时表单仍然提交。我还注意到它没有点击“doEnterKey”功能它只是提交表单。任何帮助或建议表示赞赏。

在 Internet Explorer 中一切正常，javascript 代码停止等待用户输入，然后继续，返回 false。但是在 chrome 中，警告框会显示它并且它仍然提交表单，几乎就像它没有将 false 返回给元素一样。

【问题讨论】：

您没有将事件传递给doEnterKey。你不会在doEnterKey 中返回 false。你应该为此明确写return false;。
谢谢，我现在就试试

标签： javascript jquery html asp.net vb.net

【解决方案1】：

另一个替代答案是检查表单提交事件并根据无效输入取消该提交事件。这将阻止页面回发。实际上，当页面中有 ASP.Net 验证器并打开客户端验证时，这与 ASP.Net 框架所采用的方法相同。

另外，doEnterKey中的事件不需要取消，所以我在那个函数中注释了两行。

下面的代码可以正常工作，因为我已经在我这边进行了测试。使用的逻辑有两个方面：

一个全局变量stopSubmit决定表单提交事件是否会被取消。如果此变量为真，则表单提交事件将取消。

表单的原始表单提交事件代码已预先添加了我们的自定义 JavaScript，如果需要取消表单提交，它将返回 false。当页面的正文加载时会发生这种情况，即正文的 onload 事件调用 setFormSubmit 以修改现有的表单提交代码。如果一切都有效，那么原始表单提交代码将毫无问题地执行并返回页面。

<body onload="setFormSubmit()">
<form id="form1" runat="server">
    <asp:Label ID="label1" runat="server"></asp:Label>
    <div>
        First name:
        <input type="text" name="FirstName" value="Mickey" /><br />
        Last name:
        <input type="text" name="LastName" value="Mouse" /><br />
        <input type="submit" value="Submit" />
        <input type="text" onkeydown="checkSearchLen(this,'MenuBar_imgSearchGo');" />
        <input type="submit" value="Submit" id="MenuBar_imgSearchGo"/>
    </div>
    <script>
        var stopSubmit = false;
        function setFormSubmit() {

            document.forms[0].setAttribute("onsubmit", " var stopPostback = StopPostback(); if(stopPostback === true) { return false; } " + (document.forms[0].onsubmit === null ? "" : document.forms[0].onsubmit));
        }
        function checkSearchLen(obj, defaultEnterButton) {
            if (obj.value === 'Search') obj.value = '';

            if (obj.value.length < 2 && event.keyCode == 13) {
                event.returnValue = false;
                event.cancel = true;
                stopSubmit = true;
                alert('Please ENter at Least 2 Characters');
                obj.select();
                obj.focus();
                return false;
            } else {
                stopSubmit = false;
                doEnterKey(defaultEnterButton);
            }
        }

        function doEnterKey(s) {
            if (event.keyCode == 13) {
                //event.returnValue = false;
                //event.cancel = true;
                document.getElementById(s).click();
            }
        }
        function StopPostback() {
            if (stopSubmit === true) {
                stopSubmit = false;
                return true;
            }
            return false;
        }
    </script>
</form>

【讨论】：

【解决方案2】：

在调用中传递事件对象，并在 ENTER 上阻止事件默认值。

我使用了按键事件，并在 IE、FF 和 Chrome 上进行了测试。

现在表单提交的警告消息将不会发生，因为 ENTER 被阻止。

function checkSearchLen(event, obj, defaultEnterButton) {
  event = event || window.event;
  if (obj.value == 'Search') obj.value = '';

  if (obj.value.length < 2 && event.keyCode == 13) {
    alert('Please ENter at Least 2 Characters');
    obj.select();
    obj.focus();
    event.preventDefault();
    return false;
  } else
    doEnterKey(defaultEnterButton);

}

function doEnterKey(s) {
  if (event.keyCode == 13) {
    event.returnValue = false;
    event.cancel = true;
    document.getElementById(s).click();
  }
}

<form action="http://www.google.com" onsubmit="alert('submit');">
    <input class="searchtext" id="txtSearch" value="Search" onfocus="this.value = '';this.style.color='black';this.style.fontStyle='normal';" onkeypress="checkSearchLen(event, this,'MenuBar_imgSearchGo');" name="txtSearch" />
</form>

【讨论】：

谢谢@gaemaf 我猜onkeypress 正是我要找的东西

【解决方案3】：

处理此类问题的最佳方法是使用 Jquery...只需几行 Jquery 代码即可完成您在整个程序中所做的事情！

【讨论】：

这不是相同的东西，只是语法不同吗？或者你的意思是像一个 jquery 对话框？
我认为 Jquery 代码不太容易出错...我的意思不是 jquery 对话框之类的东西...Jquery 中的事件处理程序做得更好！