我有一个有两个按钮的页面。一个是<button>元素,另一个是<input type="submit">元素。按钮按此顺序出现在页面上。如果我在表单中的任何一个文本字段中,并按下<Enter>,则会触发按钮元素的单击事件。我认为这是因为button元素放在前面。

我找不到任何看起来可靠的方法来设置默认按钮,我也不想在这一点上。在没有更好的东西的情况下,我已经捕获了窗体上的任何地方的一个按键,如果它是<Enter>键被按下,我只是否定它:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

据我所知,到目前为止,它似乎是有效的,但感觉难以置信的笨拙。

有人知道更复杂的方法吗?

同样,这个解决方案是否存在我没有意识到的陷阱?

谢谢。


当前回答

我不认为你需要javascript或CSS来解决这个问题。

根据html 5按钮规范,没有类型属性的按钮与类型设置为“submit”的按钮是一样的,即作为提交包含其表单的按钮。将按钮类型设置为“button”应该可以防止您所看到的行为。

我不确定浏览器是否支持这一点,但在html 4.01规范中为按钮指定了相同的行为,所以我希望它很好。

其他回答

默认情况下,在表单的文本字段中按enter键将提交表单。如果您不希望它以这种方式工作,您必须捕获回车键并像您所做的那样使用它。这是没有办法的。即使表单中没有按钮,它也会以这种方式工作。

Dom示例

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

javascript

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

如果你不使用preventDefault(),其他按钮将被触发。

我不认为你需要javascript或CSS来解决这个问题。

根据html 5按钮规范,没有类型属性的按钮与类型设置为“submit”的按钮是一样的,即作为提交包含其表单的按钮。将按钮类型设置为“button”应该可以防止您所看到的行为。

我不确定浏览器是否支持这一点,但在html 4.01规范中为按钮指定了相同的行为,所以我希望它很好。

你可以这样做。

将您的事件绑定到一个公共函数中,并通过按键或按钮单击调用该事件。

为例。

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

我会像下面这样做:在处理按钮的onclick事件(不提交)检查事件对象的键码。如果是回车,我会返回false。