Javascript 防止chrome中tab键的默认操作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5961333/
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
prevent default action for tab key in chrome?
提问by Shaheer
i want to PREVENT the default action when the tab key is pressed and only wanna do it in chrome, i can't find a solution for that, can anyone please help ?
我想在按下 Tab 键时阻止默认操作，只想在 chrome 中执行此操作，我找不到解决方案，任何人都可以帮忙吗？
i am using jquery
我正在使用 jquery
采纳答案by Joshua - Pendo
Here's an article on how to detect chrome:
http://javascriptly.com/2008/09/javascript-to-detect-google-chrome/
这是一篇关于如何检测铬的文章：
http://javascriptly.com/2008/09/javascript-to-detect-google-chrome/
And this question: Disable tab key on a specific divmight help you on disabling the tab key. If you are able to combine both yourself, you've probably got it working.
这个问题：在特定 div上禁用 tab 键可能会帮助您禁用 tab 键。如果您能够将两者结合起来，那么您可能已经成功了。
The disable function would become something like:
禁用功能会变成这样：
$('.textarea').on('keyup mouseup', function(e) {
if(e.which == 9) { e.preventDefault(); }
});
e.which = 9 is the tab key according to the last link given. If you are able to wrap the browser detection around it yourself, I guess you've got your working example.
e.which = 9 是根据给定的最后一个链接的制表键。如果您能够自己将浏览器检测包装起来，我想您已经得到了您的工作示例。
回答by Ev Haus
input.keydown(function(event){
if (event.keyCode === 9) {
event.preventDefault();
}
})
On keyup is too late, you need to call the event on keydown. That worked for me.
在 keyup 上为时已晚，您需要在 keydown 上调用事件。那对我有用。
回答by Cannicide
This might be a bit late, but combining @EvgueniNaverniouk's answer and @K._'s comment (on @Joshua_Pendo's answer), it is determined that you must use onkeydownand the more recent event.keyinstead of event.keyCode. What event.keydoes is it returns the name of the key instead of the code. For example, the tabkey will be returned as "Tab" (This is case sensitive). Here is the finished working code:
这可能有点晚了，但是结合@EvgueniNaverniouk 的回答和@K._ 的评论（关于@Joshua_Pendo 的回答），确定您必须使用onkeydown和更新的event.key而不是event.keyCode. 什么event.key确实是返回键，而不是代码的名称。例如，tab键将作为“Tab”返回（区分大小写）。这是完成的工作代码：
function checkForTab(event) {
if (event.key == "Tab") {
event.preventDefault();
}
else {
//whatever stuff if not Tab
}
}
document.getElementById("element").onkeydown = checkForTab(event);
function checkForTab(event) {
if (event.key == "Tab") {
event.preventDefault();
document.getElementById('element').value += " Also notice this text appears every time you press tab!";
}
else {
//whatever stuff if not Tab
}
}
document.getElementById('element').onkeydown = checkForTab;
//Trick is to use keydown and use event.key instead of keyCode<textarea id="element" style="width: 300px; height: 100px;">Press tab key here, you'll see default action doesn't occur!</textarea>Run the Code Snippet above to see an example of what I mean. You can now use a code like this to replace the default action of Tab with the action that adds spaces to a textarea. Note: the reason I use .keyinstead of .keyCodeis because .keyCodeis now deprecated as @K._ mentioned. Hope this helps!
运行上面的代码片段以查看我的意思的示例。您现在可以使用这样的代码将 Tab 的默认操作替换为向文本区域添加空格的操作。注意：我使用.key代替的原因.keyCode是因为.keyCode现在已弃用@K._ 提到的。希望这可以帮助！
回答by Alex Chaliy
JS:
JS：
document.getElementById('message_textarea').addEventListener('keydown', (event) => {
console.log('tab pressed on message textarea');
if (event.keyCode === 9) {
event.preventDefault();
}
});
HTML:
HTML：
<textarea id="message_textarea"></textarea>
