Javascript 防止 BACKSPACE 使用 jQuery 返回导航（如 Google 的主页）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11112127/
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 BACKSPACE from navigating back with jQuery (Like Google's Homepage)
提问by FastTrack
Notice while on Google's homepage, with no focus on any element, pressing BACKSPACE will put the focus into the search toolbar instead of navigating back.
请注意，在 Google 主页上，不关注任何元素时，按 BACKSPACE 会将焦点放在搜索工具栏中，而不是向后导航。
How can I accomplish this?
我怎样才能做到这一点？
I keep running into this problem with users in my app. They don't have focus on any element and hit BACKSPACE which throws them out of the app.
我的应用程序中的用户一直遇到这个问题。他们没有关注任何元素并点击 BACKSPACE 将他们扔出应用程序。
回答by Andrew Whitaker
I would bind an event handler to keydownand prevent the default action of that event if we're dealing with the backspace key outside of a textareaor input:
keydown如果我们正在处理 a textareaor之外的退格键，我会将事件处理程序绑定到并阻止该事件的默认操作input：
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input, textarea")) {
e.preventDefault();
}
});
回答by None
I really like Andrew Whitaker's answer. It will, however, still navigate back when focused on a readonly, radio, or checkbox input field and will not allow backspace on contentEditable elements so I have added a slight modification. Credit goes to Andrew Whitaker.
我真的很喜欢安德鲁·惠特克的回答。但是，当专注于只读、单选或复选框输入字段时，它仍会向后导航，并且不允许在 contentEditable 元素上使用退格键，因此我添加了一些细微的修改。归功于安德鲁·惠特克。
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input:not([readonly]):not([type=radio]):not([type=checkbox]), textarea, [contentEditable], [contentEditable=true]")) {
e.preventDefault();
}
});
At the moment it seems to be necessary to have every variation [contentEditable] that is in the HTML since [contentEditable] != [contentEditable=true].
目前似乎有必要拥有 HTML 中的每个变体 [contentEditable]，因为 [contentEditable] != [contentEditable=true]。
回答by Eswar Rajesh Pinapala
The way Google does this is kinda cool. When you press backspace, they focus the text field, preventing the users to navigate back!
谷歌这样做的方式有点酷。当您按退格键时，它们会聚焦文本字段，防止用户返回！
You can try the same:
你可以试试同样的方法：
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<input id="target" type="text" />
<script type="text/javascript">
$(document).keydown(function(e) { if (e.keyCode == 8) $('#target').focus(); });
</script>
回答by spuentep
Here is a simple solution tested on IE, Chrome and Firefox.
这是一个在 IE、Chrome 和 Firefox 上测试的简单解决方案。
$(document).on("keydown", function (event) {
// Chrome & Firefox || Internet Explorer
if (document.activeElement === document.body || document.activeElement === document.body.parentElement) {
// SPACE (32) o BACKSPACE (8)
if (event.keyCode === 32 || event.keyCode === 8) {
event.preventDefault();
}
}});
回答by Syed Ehtsham Abbas
To stop from navigating simply this code works!
要停止导航，此代码有效！
$(document).on("keydown", function (event) {
if (event.keyCode === 8) {
event.preventDefault();
}
});
But that will even also happen for input fields type text/textarea. So to restrict it for those fields, you may use
但即使输入字段类型为 text/textarea 也会发生这种情况。因此，要限制这些字段，您可以使用
$(document).on("keydown", function (event) {
if (event.which === 8 && !$(event.target).is("input, textarea")) {
event.preventDefault();
}
});
In my case where I had a text field for calendar and whenever I'd click on that calendar, Select date and press backspace it'd navigate back to previous page. To prevent it for that field only I simply used
在我的情况下，我有一个日历文本字段，每当我点击该日历时，选择日期并按退格键它会导航回上一页。为了防止它只用于该字段，我只是使用了
$('#myField').on("keydown", function (event) {
if (event.keyCode === 8 || event.which === 8) {
event.preventDefault();
}
});
I thought to mention for some to help ;-)
我想提一些帮助;-)
回答by KingOfHypocrites
This is old, but these answers will still allow you to backspace and navigate when focused on a radio button. You will want to filter the input type as well. Credit to all answers above for this:
这是旧的，但是这些答案仍然允许您在关注单选按钮时退格和导航。您还需要过滤输入类型。归功于以上所有答案：
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input[type='text']:not([readonly]), textarea")) {
e.preventDefault();
}
});
回答by LarsOlsen
I've tryed many of the code snippets on the internet without satisfyind result. The new browser versions of IE (IE11) and Crome broke my former solution, but here is what works for me with IE11 + Crome + Firefox. The code prevents backspace and the user doesn't lose anything of what he has keyed in in a text field:
我已经在互联网上尝试了许多代码片段，但没有令人满意的结果。IE (IE11) 和 Crome 的新浏览器版本打破了我以前的解决方案，但这里是 IE11 + Crome + Firefox 对我有用的方法。代码防止退格，用户不会丢失他在文本字段中键入的任何内容：
window.addEventListener('keydown', function (e) {
if (e.keyIdentifier === 'U+0008' || e.keyIdentifier === 'Backspace' || e.keyCode === '8' || document.activeElement !== 'text') {
if (e.target === document.body) {
e.preventDefault();
}
}
}, true);
回答by Gurpreet Singh
For Internet Explorer , this worked for me :
对于 Internet Explorer，这对我有用：
window.addEventListener('keydown', function (e) {
window.addEventListener('keydown', function (e) {
if (e.keyCode === 8) {
if (e.target === document.body) {
e.preventDefault();
}
}
}, true);
回答by Vijai
Handled readonly text boxes also
还处理了只读文本框
$(document).keydown(function (e) {
var activeInput = $(document.activeElement).is("input[type=text]:not([readonly]):focus, textarea:focus");
if (e.keyCode === 8 && !activeInput) {
return false;
};
});
