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

Posted 2023-05-07

【中文标题】JQuery：Keyup，如何防止箭头（向上和向下）的默认行为并输入键？

【英文标题】：JQuery: Keyup, how do I prevent the default behavior of the arrow (up & down) and enter key?

【发布时间】：2011-09-07 09:32:18

【问题描述】：

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>

我有两个问题：

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

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

2) 当我按下 enter 键时，我不想提交表单。

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

我会很感激任何想法。谢谢。

【参考方案1】：

我认为你不能在 keyup 事件上使用 preventDefault()（这是你需要用来阻止浏览器对某个键执行默认操作的方法）——它会在 之后触发 默认事件已经发生。请参阅this page 了解更多信息。

如果可以，请考虑改用keydown。

关于阻止表单提交，当提交按钮未触发提交时，您可以绑定到submit event和return false;（如何确定请参阅jQuery: how to get which button was clicked upon form submission?）。

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

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

【讨论】：

我知道，但我希望有另一种方法来防止 keyup 函数的默认行为。不过谢谢！

@krysis 抱歉，您似乎对keyup无能为力

无论如何，谢谢！ :) 也许我会让keydown 为我想做的事情工作。

$('form').keypress(function(e) if(e.which === 13) e.preventDefault(); );

+1 我试图在 KEYUP 上 preventDefault() 以防止在某些元素具有焦点时滚动。 KEYDOWN 为我工作。谢谢！

【参考方案2】：

您可以尝试返回 false 或使其调用函数并使用 http://api.jquery.com/event.preventDefault/

而不是 break

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

另外，$('form').submit(function() return false); 会完全停止提交，但我不确定您是否要这样做？

【讨论】：

我已经尝试过 e.preventDefault，但由于某种原因它不起作用。我不知道为什么。它仅在我使用 keydown / keypress 时才有效。

@krysis 当前形式的答案（使用keyup）都不会起作用，因为keyup 如果在之后触发默认操作，所以你不能preventDefault()。请参阅我的更正答案。

另外，preventDefault 是一个函数，所以应该是e.preventDefault()

【参考方案3】：

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

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

【参考方案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;
  
);

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

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

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

【讨论】：

keyup事件无法阻止，看看here

【参考方案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.
);

【讨论】：

这不是使用keyup - 这就是重点。你是对的 - 该代码将起作用，但只是因为您使用keydown 来抑制回车键。正如其他答案在此处所述，您不能单独使用keyup 来执行此操作，因为到那时该事件已经被触发，您无法及时返回并抑制它。