Chrome 警告框会提交网页，即使返回 false

Chrome Alert Box Submits Page Even if Returning False

本文关键字：返回 false 网页警告提交 Chrome 更新时间：2023-09-26

在我的应用程序中，我有一个文本框来搜索项目。在此文本框中，我希望用户在搜索之前必须输入至少 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();
  }
}

<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" />

在我的javascript中，用户每次击键的函数都会检查正在按下的键代码以查找"Enter"输入。如果用户按"Enter"并且文本框中的字符数小于 2，则它应该提醒用户并返回 false。但无论用户按"Enter"时仍会提交表单。我还注意到它没有点击"doEnterKey"功能，它只是提交表单。任何帮助或建议不胜感激。

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

在调用中传递事件对象，并在 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>

处理这类问题的最佳方法是使用 Jquery...只需几行Jquery代码就可以完成您在整个程序中所做的工作！

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

另外，没有必要在doEnterKey中取消事件，所以我在该函数中注释了两行。

以下代码将像我在这边测试的那样工作。所使用的逻辑有两个方面：

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

的原始表单提交事件代码已预先附加了我们的自定义 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>