我有以下javascript在我的页面似乎不工作。

$('form').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});

我想在进入时禁用提交表单,或者更好的是,调用我的ajax表单提交。任何一种解决方案都是可以接受的,但上面包含的代码不会阻止表单提交。


当前回答

我听说哪个是不推荐的,所以把最佳评分的答案改成这个。

$('#formid').on('keyup keypress', function(e) {
  if (e.key === 'Enter') { 
    e.preventDefault();
    return false;
  }
});

引用https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

其他回答

捕获和测试ENTER键的每一次击键确实让我很恼火,所以我的解决方案依赖于以下浏览器行为:

按下ENTER将触发提交按钮上的单击事件(在IE11, Chrome 38, FF 31中测试)** (参考:http://mattsnider.com/how-forms-submit-when-pressing-enter/)

所以我的解决方案是删除标准提交按钮(即<input type="submit">),这样上述行为就会失败,因为当按下ENTER键时没有提交按钮可以神奇地点击。相反,我在一个常规按钮上使用jQuery点击处理程序,通过jQuery的.submit()方法提交表单。

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function(){
    $('#myform').submit();
  });
</script>

演示:http://codepen.io/anon/pen/fxeyv?editors=101

**如果表单只有一个输入字段并且该字段是'text'输入,则此行为不适用;在这种情况下,即使HTML标记中没有提交按钮(例如,搜索字段),表单也会按ENTER键提交。自90年代以来,这一直是标准的浏览器行为。

如果keyCode未被捕获,则捕获哪个:

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

编辑:错过了它,最好使用键up而不是按键

编辑2:在一些较新版本的Firefox中,表单提交不会被阻止,因此在表单中添加按键事件会更安全。它也不能工作(不再?),只是将事件绑定到表单“name”,但只绑定到表单id。因此,我通过适当地更改代码示例使这一点更加明显。

修改bind()为on()

以上大多数答案将阻止用户在textarea字段中添加新行。如果这是你想要避免的情况,你可以通过检查当前有焦点的元素来排除这种特殊情况:

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}

如果你只是想在进入和提交按钮时禁用提交,也可以使用表单的onsubmit事件

<form onsubmit="return false;">

你可以将“return false”替换为调用JS函数,该函数将执行所需的任何操作,并将提交表单作为最后一步。

我不知道你是否已经解决了这个问题,或者现在有人试图解决这个问题,但是,这是我的解决方案!

$j(':input:not(textarea)').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function(){
            return $(this).attr('action');
        }).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function(){
            return $(this).attr('data-oldaction');
        });
        return false;
    }
});