Javascript JQuery：Keyup，如何防止箭头（向上和向下）的默认行为并输入键？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6220300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: Keyup, how do I prevent the default behavior of the arrow (up & down) and enter key?
提问by no.good.at.coding
JavaScript (JQuery)
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>
I have 2 problems:
我有两个问题：
1) The caret shouldn't move when I hit the uparrow 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 enterkey, I don't want the form to be submitted.
2) 当我按下回车键时，我不想提交表单。
BTW, I want to get this to work with keyupand not keypress.
顺便说一句，我想让它与keyup而不是keypress 一起使用。
I'd appreciate any ideas. Thanks.
我很感激任何想法。谢谢。
回答by no.good.at.coding
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 keyupevent - it is fired afterthe default event has already occurred. See this pagefor more.
我不认为你可以preventDefault()（这是你需要用来阻止浏览器对一个键执行默认操作）在keyup事件上 - 它在默认事件已经发生后被触发。请参阅此页面了解更多信息。
If you can, consider using the keydowninstead.
如果可以，请考虑使用keydown代替。
As for stopping the form from submitting, you could bind to the submiteventand 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事件，并且return false;当提交不是由提交按钮触发时（请参阅jQuery：如何获取表单提交时单击了哪个按钮？有关如何确定这一点）。
On the other hand, you could also bind to keypressfor the form and when Enteris pressed, cancel submission the same way (untested code):
另一方面，您也可以绑定到keypress表单，并在Enter按下时以相同的方式取消提交（未经测试的代码）：
$('form').keypress(function(e){
if(e.which === 13){
return false;
}
});
回答by thugsb
Instead of break you could try return false or make it call a function and use http://api.jquery.com/event.preventDefault/
您可以尝试 return false 或使其调用函数并使用http://api.jquery.com/event.preventDefault/而不是 break
For example: case 40: function(e) {e.preventDefault;}
例如： case 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});会完全停止提交，但我不确定那是你想要的吗？
回答by devmatt
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.
为了防止在用户按下回车键时提交表单，您需要绑定表单的提交功能，如果事件触发器是按下回车按钮，则返回 false。
for the Up/Down button press, use e.preventDefault();
对于向上/向下按钮按下，使用 e.preventDefault();
回答by Alex Weber
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 submitevent:
此外，为了防止使用回车键提交表单，您应该检查表单的submit事件：
$('#form').submit(function(e){
var code = e.keyCode ? e.keyCode : e.which;
if ($.inArray(code, override_keys)) {
return false;
}
});
回答by skolind
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.
});
