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

Question

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

16

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

注：本文是一段HTML代码，表示一个段落标签

内部的文字加粗。

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

我有两个问题：

1）在按向上箭头键时，插入符号不应该移动。

例如，在Chrome中，当我按向上键时，插入符号会向左移动。但是我只在Chrome浏览器中遇到这个问题，在FF浏览器中没有问题。

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

顺便说一下，我想使用keyup而不是keypress来实现这一点。

如果您有任何想法，我会非常感激。谢谢。

- user317005

5个回答

0

不要使用break，您可以尝试使用return false或调用一个函数并使用http://api.jquery.com/event.preventDefault/。

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

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

- thugsb

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

2

@krysis 目前这些答案（利用 keyup）都不会起作用，因为 keyup 是在默认操作完成后才触发的，所以你不能使用 preventDefault()。请参见我的纠正后的答案。 - no.good.at.coding

1

另外，preventDefault是一个函数，因此应该使用e.preventDefault()。 - Adam Hopkinson

0

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

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

- matthewnessworthy

0

最可靠的方法是将 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;
  }
});

- Alex Weber

1

keyup事件无法被阻止，可以在这里查看：http://www.quirksmode.org/dom/events/keys.html - joiggama

0

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

这是你需要做的：

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

- skolind

那不是使用 keyup - 这就是重点。你是对的 - 那段代码会起作用，但只是因为你使用了 keydown 来抑制回车键。正如其他答案在这里所述，你不能仅使用 keyup 来做到这一点，因为事件已经被触发，你无法回到过去并抑制它。 - Mark Embling

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- no.good.at.coding · Accepted Answer

我认为你无法在keyup事件上执行preventDefault()（这是你需要使用的方法，用于阻止浏览器执行按键的默认操作），因为该事件是在默认操作已经发生之后才被触发。请参见这个页面获取更多信息。

如果可以的话，请考虑改用keydown事件。

至于停止表单提交，你可以绑定到submit事件，并在提交不是由提交按钮触发时使用return false;（请参考jQuery：如何确定表单提交时点击了哪个按钮？）。

另外，你还可以将keypress事件绑定到表单上，在按下Enter键时以同样的方式取消提交（未经测试的代码）：

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