Javascript 如何在所有浏览器上禁用退格键？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6309693/
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
How can I disabling backspace key press on all browsers?
提问by TonyTheJet
I'm trying to disable the backspace button on an order page in all cases except when a textarea or text input is an active element to prevent users from accidentally backing out of an order. I have it working fine in most browsers, but in IE (testing in IE9, both regular and compatibility mode) it still allows the user to hit the backspace and go to the previous page.
我试图在所有情况下禁用订单页面上的退格按钮，除非 textarea 或文本输入是活动元素以防止用户意外退出订单。我在大多数浏览器中都能正常工作，但在 IE 中（在 IE9 中测试，常规和兼容模式）它仍然允许用户按退格键并转到上一页。
Here's the code:
这是代码：
$(document).keypress(function(e){
var activeNodeName=document.activeElement.nodeName;
var activeElType=document.activeElement.type;
if (e.keyCode==8 && activeNodeName != 'INPUT' && activeNodeName != 'TEXTAREA'){
return false;
} else {
if (e.keyCode==8 && activeNodeName=='INPUT' && activeElType != 'TEXT' && activeElType != 'text'){
return false;
}
}
});
Any advice on what I'm doing wrong here?
关于我在这里做错的任何建议？
Thanks!
谢谢！
回答by lonesomeday
I think you're overcomplicating that. Rather than checking for an active element, find the event target instead. This should give you the information you need. It's also better to use keydownrather than keypresswhen there is no visible character. Finally, it's better to use e.preventDefault()for better granularity.
我认为你过于复杂了。与其检查活动元素，不如查找事件目标。这应该为您提供所需的信息。使用keydown而不是keypress在没有可见字符的情况下也更好。最后，最好使用e.preventDefault()更好的粒度。
$(document).keydown(function(e) {
var nodeName = e.target.nodeName.toLowerCase();
if (e.which === 8) {
if ((nodeName === 'input' && e.target.type === 'text') ||
nodeName === 'textarea') {
// do nothing
} else {
e.preventDefault();
}
}
});
NB I could have done this the other way round, rather than an empty ifblock and all the code going in the elseblock, but I think this is more readable.
注意，我本可以反过来做，而不是一个空if块和块中的所有代码else，但我认为这更具可读性。
回答by Kevin Mansel
Instead of keypress, try the keydown function, it will fire before the actual browser based hook. Also, putting in a preventDefault() function will assist in this. IE :
尝试使用 keydown 功能而不是按键，它会在基于浏览器的实际钩子之前触发。此外，放入一个 preventDefault() 函数将有助于此。IE ：
$(document).keydown(function(e){
e.preventDefault();
alert(e.keyCode);
});
Hope this helps.
希望这可以帮助。
回答by Hemkarn Patil
The most Simple thing you can do is add the following one line in the very first script of you page at very first line
您可以做的最简单的事情是在您页面的第一个脚本中的第一行添加以下一行
window.history.forward(1);
回答by James Nurse
Most examples seem to be for the JQuery framework - Here an example for ExtJS
大多数示例似乎是针对 JQuery 框架的 - 这是 ExtJS 的示例
(I've been getting a lot of downvotes for this recently as the question now has JQuery tag on it, which it didn't previously. I can remove the answer if you like as isn't for JQuery but it's proven to help others not using that framework).
（我最近收到了很多反对票，因为这个问题现在有 JQuery 标签，以前没有。如果你喜欢，我可以删除答案，因为它不适用于 JQuery，但事实证明它可以帮助其他人不使用该框架）。
To use this add this code block to your code base, I recommend adding it inside the applications init function().
要使用它将此代码块添加到您的代码库中，我建议将其添加到应用程序 init 函数（）中。
/**
* This disables the backspace key in all browsers by listening for it on the keydown press and completely
* preventing any actions if it is not which the event fired from is one of the extjs nodes that it should affect
*/
Ext.EventManager.on(window, 'keydown', function(e, t) {
var nodeName = e.target.nodeName.toLowerCase();
if (e.getKey() == e.BACKSPACE) {
if ((nodeName === 'input' && e.target.type === 'text') ||
nodeName === 'textarea') {
// do nothing
} else {
e.preventDefault();
}
}
});
回答by Prashant
$(document).keydown(function(e) {
var elid = $(document.activeElement).is('input');
if (e.keyCode === 8 && !elid) {
return false;
}
});
Hope this might help you
希望这可以帮助你
回答by jvenema
Use e.which instead of e.keyCode; jQuery normalizes this value across browsers.
使用 e.which 代替 e.keyCode；jQuery 跨浏览器标准化此值。
http://api.jquery.com/keydown/
http://api.jquery.com/keydown/
To determine which key was pressed, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the key code.
要确定按下了哪个键，请检查传递给处理程序函数的事件对象。虽然浏览器使用不同的属性来存储这些信息，但 jQuery 规范了 .which 属性，以便您可以可靠地使用它来检索关键代码。
Then, use e.preventDefault(); to prevent the default behaviour of moving to the previous page.
然后，使用 e.preventDefault(); 以防止移动到上一页的默认行为。
回答by aerobiotic
<html>
<head>
<script type="text/javascript">
function stopKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 8) && (node.type!="text")) {return false;}
}
document.onkeypress = stopKey;
</script>
</head>
<body onkeydown="return stopKey()">
<form>
<input type="TEXTAREA" name="var1" >
<input type="TEXT" name="var2" >
</form>
</body>
</html
I had to add the onDownKey attribute to the body in order to get editing keys to go to the functions.
我必须将 onDownKey 属性添加到正文中，以便获得转到功能的编辑键。
回答by KDawg
Seems like the "backspace" will also act as "navigation back" if you have selected radio buttons, check-boxesand bodyof document as well. Really annoying for forms - especially when using post. All the form could be lost with one slip of the "backspace" key -_- ...
如果您还选择了单选按钮、复选框和文档正文，则“退格键”似乎也将充当“返回导航” 。对于表单来说真的很烦人——尤其是在使用 post 时。只需按一下“退格”键 -_- 就可能会丢失所有表格...
Honestly... who's idea was it to allow the "backspace as a navigational "back" button!!! really bad idea in my opinion.
老实说......谁的想法是允许“退格键作为导航“后退”按钮！！！在我看来真的是个坏主意。
I disable the "backspace" default on anything that is not a text area or text field - like this:
我在不是文本区域或文本字段的任何内容上禁用“退格”默认值 - 如下所示：
$(document).keydown(function(e){
console.log(e.keyCode+"\n");
var typeName = e.target.type;//typeName should end up being things like 'text', 'textarea', 'radio', 'undefined' etc.
console.log(typeName+"\n");
// Prevent Backspace as navigation backbutton
if(e.keyCode == 8 && typeName != "text" && typeName != "textarea"){
console.log("Prevent Backbutton as Navigation Back"+typeName+"\n");
e.preventDefault();
}
//
})
Not sure where else one would want the normal behavior of a back-button other than in these two areas.
不知道除了这两个区域之外，还有什么地方需要后退按钮的正常行为。
回答by shams mosowi
document.onkeydown = KeyPress;
function KeyPress(e) {
if (!e.metaKey){
e.preventDefault();
}
}
