控制 ENTER 键答案

【问题标题】：Controlling ENTER key控制 ENTER 键
【发布时间】：2012-06-04 19:30:16
【问题描述】：

我们怎样才能使页面中的表单在按下 Enter 时不提交 - 而是。它与按下特定按钮或图标或图像的作用相同吗？

这是我的表单的内容：

<input type="text" id="txt" /><input type="button" value="search"            
 onclick="searchresult()" />

问题是，如果我按下 Enter，表单会提交并且文本字段会自行清除，但函数 searchresult() 不会显示其效果。只按按钮时，效果很好。

【问题讨论】：

我会绑定到表单的提交事件而不是按钮的点击事件。这允许用户通过按下回车键来提交表单，而不是要求用户伸手去使用他们的鼠标。
完全是@KevinB 见：stackoverflow.com/a/10887171/144665
@iambriansreed 我认为情况更糟。这意味着用户不能选择提交按钮并按下回车键。我猜他们仍然可以按空格键。
我首先尝试过，但现在按下回车键时它确实做到了，所以我将它替换为按钮并在 prtessing 按钮上正常工作。通常人们在输入文本字段后按回车键，但它在我的中不起作用。我想要相同的 ajax 函数调用用户到达输入键或搜索按钮。请详细建议我
@KevinB 更新了我的答案。 Enter 键被忽略，除非它是一个按钮。

标签： javascript jquery forms

【解决方案1】：

HTML

<input type="text" id="txt"/>
<input type="button" value="search"/>

jQuery

$('input[type=text]').on('keyup', function(e) {
  if(e.which == 13) {   // 13 is keycode for enter
    e.preventDefault();
  }
})

你也可以像下面这样绑定到submit()

$('form').submit(function(e) {  // instead of only `form`, 
                                // use with `id` or `class` combination
   if(e.which == 13) {
     e.preventDefault();
   }
});

剩余

别忘了把你的代码放在里面

$(document).ready(function() {
   // your code
});

总之

$(function() {
  // your code
});

【讨论】：

@thecodeparadox 此处选择器错误，该事件应绑定到文本输入，而不是按钮。
@cowboy：如果codeparadox的回答有帮助，请采纳。

【解决方案2】：

或者，您可以绑定到onsubmit 事件以在提交表单之前执行任何处理，而不是禁用回车键。来自MDN documentation：

当用户点击表单 () 中的提交按钮时会引发提交事件。

【讨论】：

【解决方案3】：

试试：

$('form').submit(function(event){
    if(!$(':focus',this).is(':button'))
        event.preventDefault();
});

这附加到表单本身。如果它以任何方式提交，而不是单击提交按钮，它会停止提交过程。为了获得更好的性能，缩小'form' 选择器的范围。

【讨论】：

【解决方案4】：

试试这个：

表格

<form id="myForm">
<input type="text" id="txt" />
<input type="submit" value="search" />
</form>

<script>
$(document).ready(function(){
    $("#myForm").submit(function(e){
        e.preventDefault();
        searchresult();
    });
});
</script>

【讨论】：

查看我的编辑，需要 type="button" 为 type="submit"
感谢您的宝贵建议