JQuery：Keyup，如何防止箭头（向上和向下）和回车键的默认行为？

Question

JavaScript (JQuery)

$('input').keyup(function(e)
{
    var code = e.keyCode ? e.keyCode : e.which;

    switch(code)
    {
        case 38:
        break;

        case 40:
        break;

        case 13:
        break;

        default:
        return;
     }
 });

HTML

<form method="post" action="/">
<input type="text" name="text" />
<button type="submit">Submit</button>
</form>

我有 2 个问题：

1) 当我按下向上箭头键时，插入符号不应该移动。

例如，在 Chrome 中，当我按下向上键时，它会将插入符号移至左侧。但我只在 Chrome 中遇到这个问题。在FF中运行良好。

2）当我按下回车键时，我不想提交表单。

顺便说一句，我想让它与 keyup 一起使用，而不是与 keypress 一起使用。

我将不胜感激任何想法。谢谢。

Answer 1

我认为你不能 preventDefault() （这是您需要使用什么来阻止浏览器对 keyup 事件执行某个键的默认操作 - 它在默认事件发生后被触发。请参阅此页面了解更多信息。

如果可以的话，请考虑使用 keydown 来代替。

至于停止表单提交，您可以绑定到 submit 事件并 return false; 当提交不是由提交按钮触发时（请参阅jQuery：如何获取在提交表单时单击了哪个按钮？ 了解如何确定这一点）。

另一方面，您还可以绑定到表单的 keypress ，当按下 Enter 时，以相同的方式取消提交（未经测试的代码）：

$('form').keypress(function(e){
    if(e.which === 13){
        return false;
    }
});

Answer 2

您可以尝试 return false 或使其调用函数并使用 http://api.jquery，而不是中断。 com/event.preventDefault/

例如：case 40: function(e) {e.preventDefault;}

另外，$('form').submit(function() {return false}); 会完全停止提交，但我不确定这就是你想要的？

Answer 3

为了防止用户按下 Enter 时提交表单，您需要绑定表单的提交函数，如果事件触发器是按下 Enter 按钮，则返回 false。

对于向上/向下按钮按下，请使用 e.preventDefault();

Answer 4

最可靠的方法是e.preventDefault()、e.stopPropagation()和return false的组合；

它可能如下所示：

var override_keys = [13, 38, 40];

$('input').keyup(function(e){
  var code = e.keyCode ? e.keyCode : e.which;

  if ($.inArray(code, override_keys)) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }
});

另外，为了防止使用 Enter 键提交表单，您应该检查表单的 submit 事件：

$('#form').submit(function(e){
  var code = e.keyCode ? e.keyCode : e.which;

  if ($.inArray(code, override_keys)) {
    return false;
  }
});

Answer 5

看起来你实际上可以在使用 keyup() 时停止默认的“ENTER”； ... jQuery api 在这里写了它自己： http://api.jquery.com/keyup/

您必须这样做：

$('textarea').keyup(function(e) {
   // your code here
}).keydown(function(e){
   // your e.which for ENTER.
});