Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 在我的javascript中，来自用户的每次击键功能，它检查被按下的keyCode，寻找＆＃39; Enter＆＃39;输入。如果用户按下“输入”键。并且文本框中的字符数小于2，然后它应该警告用户并返回false。但是，无论用户何时按下“输入”，表单仍然会被提交。我还注意到它并未触及“doEnterKey”。功能它只是提交表单。任何帮助或建议表示赞赏。

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

Answer 1

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

Answer 2

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

此外，无需取消doEnterKey中的事件，因此我在该功能中注释了两行。

以下代码将在我身边测试过。使用的逻辑有两个方面：

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

表格的原始表单提交事件代码正在使用我们的自定义JavaScript预先填写，如果需要取消表单提交，则会返回false。当页面的正文加载，即body的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>

即使返回错误，Chrome警报框也会提交页面

3 个答案: