8

当用户按下回车键时，我试图触发提交按钮。适用于除 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/

4

4 回答 4

15

这里有几点需要考虑：

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

于 2012-05-24T14:42:49.503 回答
5

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();
    }
});
于 2012-05-24T14:45:23.637 回答
1

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

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

- 编辑 -

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

于 2012-05-24T14:32:10.210 回答
1

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

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

尝试交换这些按钮的顺序以了解我的意思：

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

自然地，浏览器已经被指示监听以响应Enter文本输入。这会导致浏览器单击相关的提交按钮。此外，由于您没有form通过form属性明确提供 a 或相互关联的元素，因此浏览器正试图为您建立这种关系。

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

如果您像我上面所说的那样重新排序元素，我们会看到相反的情况发生。IE 将另一个<input>元素与文本框相关联。按下Enter文本框会隐式引发提交输入的点击事件。

.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'或将其放在预期的提交按钮之后来消除两个按钮之间的歧义。

于 2012-05-24T15:07:25.460 回答