javascript - Chrome 警告框提交页面，即使返回 false

Question

在我的应用程序中，我有一个用于搜索项目的文本框。在此文本框中，我希望用户在搜索前必须输入至少 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 中，用户每次击键时的功能，它检查正在按下的 keyCode 以查找“Enter”输入。如果用户按下“Enter”并且文本框中的字符数少于 2，那么它应该提醒用户并返回 false。但是，无论用户按下“Enter”时仍会提交表单。我还注意到它没有点击“doEnterKey”功能，它只是提交了表单。感谢您提供任何帮助或建议。

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

Answer 1

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