IE8 - Enter 键不会提交我的搜索字段答案

【问题标题】：IE8 - Enter key won't submit my search fieldIE8 - Enter 键不会提交我的搜索字段
【发布时间】：2011-03-23 06:34:47
【问题描述】：

大家好，当我按下回车键时，我有一个搜索字段没有提交，这个问题只发生在 IE8 上，其他所有浏览器都可以正常工作（即使是 IE6）。请各位我需要他的帮助，请在下面找到我的代码。

<div class="box-search">
                <input type="text" class="text-box" id="text-search" />
                <label class="overlabel" for="text-search">Enter keyword(s)</label>
                <input type="submit" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</div>

好的，我忘了说这个表单是在一个 ASP 编码的页面中，这就是它没有被包裹在表单元素中的原因。

【问题讨论】：

您可以继续从 onclick 处理程序中删除 javascript:，它在那里完全没用。

标签： javascript html css internet-explorer-8 cross-browser

【解决方案1】：

旧票，但我想插话：IE8 做了以下奇怪的事情：Enter 键将提交表单，但任何

<input type="submit" name="MySubmitButton" value="I hope I detect THIS VALUE in POST" />

不会在 POST 中发送。

IE9 改变行为并发送值。据我的测试显示，Chrome 总是发送值。

那里有大量的“Enter not submit in IE8”投诉，我觉得其中很多都可能导致这种行为。我希望这对他们中的一些人有所帮助。

【讨论】：

【解决方案2】：

您需要在文本框和按钮周围放置一些<form></form> 标签。像这样

<form method='POST' onsubmit='javascript:goSearch();return false;'> 
            <input type="text" class="text-box" id="text-search" />       
            <label class="overlabel" for="text-search">Enter keyword(s)</label>       
            <input type="button" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</form>

另一种方法是使用文本框上的 keydown 事件并检查它是否是回车键。

希望这会有所帮助。

【讨论】：

可能不应该同时拥有 onclick 和 onsubmit
这样更好吗。现在他们可以按回车键或单击按钮。
@Znarkus：只有其中一个会被调用（因为return false）；当“enter”在 IE 中发送 form.submit() 时，它在一些较旧的浏览器（Opera 9，iirc）中发送 btn-submit.click()

【解决方案3】：

另一种方法是这样做，而不是提交按钮上的onclick。

<form action="script.php" method="post" onsubmit="goSearch();return false">
<div class="box-search">
    <input type="text" class="text-box" id="text-search" />
    <label class="overlabel" for="text-search">Enter keyword(s)</label>
    <input type="submit" value="" name="btn-submit" class="btn-go" />
</div>
</form>

编辑：添加了动作和方法属性。 action 属性是验证所必需的。

【讨论】：

并传递表单：onsubmit="return goSearch(this)" 如果成功则在脚本末尾返回 false，如果您希望将表单提交到服务器则返回 true
return false 成功似乎有点倒退。那我宁愿return !goSearch(this) 和return true 成功。

【解决方案4】：

如果删除“return false;”会发生什么？从提交的事件处理程序？当用户在文本输入字段中按 ENTER 时，IE 的行为就像使用了提交按钮一样，但“false”会阻止事件冒泡。

编辑：使用新的 ASP 信息。

看到这个：http://mikepope.com/blog/AddComment.aspx?blogid=309他解释了它是如何工作的，所以这里没有细节，只是说你需要做的就是在你的 page_load 事件中添加以下内容：

Page.RegisterHiddenField("__EVENTTARGET", "MyDefaultButton");

【讨论】：

好吧，我从代码中删除了 return false 但 ie8 仍然有同样的问题。

【解决方案5】：

我发现 IE8 中存在一个错误，有时表单无法按 Enter 键提交。

最好的方法是设置一个事件来处理被按下的输入。

在 jQuery 中你会这样做：

$("input_box_id").keydown(function(e){

     if (e.keyCode == 13) //enter
     {
         $("btn-submit").click();
     }
});

在 JavaScript 中应该是：

document.getElementById("input_box_id").onclick = function(e){

   var keycode =(window.event) ? event.keyCode : e.keyCode;

   if (keycode == 13) //enter
   {
      document.getElementById("input_box_id").click();
   }

};

并将 Html 更改为：

<form action="url_here" method="post">
<div class="box-search">
    <input type="text" class="text-box" id="text-search" />
    <label class="overlabel" for="text-search">Enter keyword(s)</label>
    <input type="submit" value="" id="btn-submit" name="btn-submit" class="btn-go" />
</div>
</form>

如果您已经有 Asp.net 表单，请忽略表单标签。

【讨论】：

【解决方案6】：

这是否与您有一个 onclick 事件以及对 GoSearch 的函数调用和附加到“提交”输入类型的 return false 的事实有关？

你能过去 goSearch() 函数的内容吗？

【讨论】：