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

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>

I have 2 problems:

我有两个问题:

1) The caret shouldn't move when I hit the up arrow key.

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

For example, in Chrome when I hit the up-key it moves the caret to the left. But I only have this problem in Chrome. It works fine in FF.

例如,在Chrome中,当我按下向上键时,它会将插入符号移到左侧。但我只在Chrome中遇到此问题。它在FF中工作正常。

2) When I hit the enter key, I don't want the form to be submitted.

2)当我按下回车键时,我不希望提交表格。

BTW, I want to get this to work with keyup and not keypress.

顺便说一下,我想让这个与keyup一起工作而不是keypress。

I'd appreciate any ideas. Thanks.

我很欣赏任何想法。谢谢。

5 个解决方案

#1

I don't think you can preventDefault() (which is what you'd need to use to stop the browser from performing the default action for a key) on the keyup event - it is fired after the default event has already occurred. See this page for more.

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

If you can, consider using the keydown instead.

如果可以,请考虑使用keydown。

As for stopping the form from submitting, you could bind to the submit event and return false; when the submit was not triggered by the submit button (see jQuery: how to get which button was clicked upon form submission? for how to determine this).

至于停止提交表单,您可以绑定到submit事件并返回false;当提交没有被提交按钮触发时(参见jQuery:如何在表单提交时点击哪个按钮?如何确定)。

On the other hand, you could also bind to keypress for the form and when Enter is pressed, cancel submission the same way (untested code):

另一方面,您也可以绑定到表单的按键,当按下Enter时,以相同的方式取消提交(未经测试的代码):

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

#2

Instead of break you could try return false or make it call a function and use http://api.jquery.com/event.preventDefault/

您可以尝试返回false,或者让它调用函数并使用http://api.jquery.com/event.preventDefault/而不是中断

For example: case 40: function(e) {e.preventDefault;}

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

Also, $('form').submit(function() {return false}); would stop submissions altogether, but I'm not sure that's what you're after?

另外,$('form')。submit(function(){return false});会完全停止提交,但我不确定你的意思是什么?

#3

In order to prevent the form being submitted when the user presses enter you need to bind the submit function of your form and return false if the event trigger was the enter button being pressed.

为了防止在用户按Enter键时提交表单,您需要绑定表单的提交功能,如果事件触发器是按下的输入按钮,则返回false。

for the Up/Down button press, use e.preventDefault();

按“向上/向下”按钮,使用e.preventDefault();

#4

The most reliable method is a combination of e.preventDefault(), e.stopPropagation() and return false;

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

Here's what it might look like:

这是它的样子:

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

Also, to prevent the form from being submitted with the enter key you should check the form's submit event:

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

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

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

#5

It seems like that you actually CAN stop the default for 'ENTER' while using keyup(); ... jQuery api writes about it themselves here: http://api.jquery.com/keyup/

看起来你实际上可以在使用keyup()时停止'ENTER'的默认值; ... jQuery api自己在这里写道:http://api.jquery.com/keyup/

Here's how you have to do:

这是你必须做的:

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

#1