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>

我有两个问题：

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

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

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

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

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

Answer 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;
    }
});

Answer 2

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

而不是 break

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

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

Answer 3

为了防止在用户按下回车时提交表单，您需要绑定表单的提交函数，如果事件触发是按下回车按钮，则返回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;
  }
});

另外，为了防止使用回车键提交表单，您应该检查表单的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.
});