Question

我正在尝试在用户按Enter键时触发提交按钮。适用于除Internet Explorer 9之外的所有浏览器。奇怪的是，IE坚持也会触发我从未告诉过的另一个按钮的点击。我做错了什么或者如何解决这个问题？

以下是我的代码。在IE中按Enter键会按预期触发提交点击，但由于某种原因也会触发“某个按钮”点击（即使没有我的按键监听器）：

$('input[type=submit]').click(function () {
    alert('Submit click');
});

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
    var keycode = event.keyCode || event.which;
    if (keycode == 13) $('input[type=submit]').click();
});

//ROUTE CLEAR HANDLER
$('button').click(function () {
    alert('Button click');
});

您可以在此处查看错误：http://jsfiddle.net/h64xD/

Answer 1

以下是需要考虑的几件事：

IE9默认将<button/>元素计为type="submit"。因此，要使其不提交，您必须明确：

<button type="button">Some button</button>

如果您这样做，您会注意到模拟的click事件现在不会触发<button/>但仍会触发2个事件。原因是，因为您没有明确定义<form/>元素，IE9会将控件视为一种形式，因此在文本框中按enter会触发2个事件：

你正在效仿的那个
默认表单提交按钮行为

所以再次解决这个问题，你必须明确：

<button type="button">Some button</button>
<form><input type="text" /></form>
<input type="submit" value="Submit" />

现在，这些是您在IE中看到行为的原因。 @MrSlayer的回答迎合了第二个问题，即在您使用keypress

进行令人满意的处理后停止preventDefault()事件

Answer 2

Enter键具有要提交的默认行为，因此您需要阻止执行默认行为。因为默认情况下button标记是type="submit"，所以当按下Enter键时它会执行该按钮。

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
    var keycode = event.keyCode || event.which;
    if (keycode == 13)
    {
        event.preventDefault();
        $('input[type=submit]').click();
    }
});

Answer 3

如何触发表单的提交而不是单击按钮？

$('input[type=text]').keypress(function(e) {
     var keycode = event.keyCode || event.which,
         frm = $(this).closest('form');

     if (keycode == 13) {
          e.stopPropagation();
          frm.submit();
          return false;
     }
     return true;
});

- 编辑 -

稍微更新以停止事件传播。

Answer 4

首先，当用户按下 enter 时，您无需手动附加事件来提交表单 - 浏览器已经处理过。

奇怪的是，这与元素的顺序，隐式表单关联以及IE处理按钮作为提交元素的事实有关。

尝试交换这些按钮的顺序，看看我的意思：

<input type="text" />
<input type="submit" value="Submit" />
<button>Some button</button>

当然，已经指示浏览器在文本输入上侦听响应 Enter 。这导致浏览器单击关联的提交按钮。此外，由于您未通过form属性明确提供form或相关元素，因此浏览器正在尝试为您建立该关系。

在您的代码中，<button>元素被假定为文本输入的提交按钮（因为它是隐式表单中的第一个提交按钮）。因此，只要您在文本输入上按 Enter ，浏览器就会自然地引发相关按钮的click事件。

如果您重新订购元素，如上所述，我们会看到相反的情况。 IE将其他<input>元素与文本框关联。在文本框中按 Enter 会隐式提升提交输入上的click事件。

您可以通过比较各种元素的.form属性来确认此行为。例如，添加一些id值可以让我们更轻松地访问这些值：

<button id="fiz">Some Button</button>
<input  id="foo" type="text" />
<input  id="bar" type="submit" value="Submit" />

然后进行一些快速比较：

var button = document.getElementById("fiz"); 
var text = document.getElementById("foo"); 
var submit = document.getElementById("bar"); 

button.form === text.form;   // true 
submit.form === text.form;   // true 
button.form === submit.form; // true

因此，最后，您可以通过将<button>元素声明为type='button'或将其放在预期的提交按钮之后来消除两个按钮之间的歧义。

IE bug触发点击2个按钮？

4 个答案: