防止BACKSPACE使用jQuery导航(如谷歌的主页)

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.

请注意，在谷歌的主页上，不关注任何元素，按下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，将它们从应用程序中删除。

9 个解决方案

#1

I would bind an event handler to keydown and prevent the default action of that event if we're dealing with the backspace key outside of a textarea or input:

如果我们在处理文本区域或输入外的backspace键，我会将事件处理程序绑定到keydown并防止该事件的默认动作:

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});

#2

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.

我真的很喜欢安德鲁·惠特克的回答。但是，当集中在readonly、radio或复选框输入字段时，它仍然会导航回来，并且不会允许在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]。

#3

The way google does this is kinda cool. When you press backspace, they focus the textfield. Preventing the users to navigate back!

谷歌的做法很酷。当您按下backspace时，它们会聚焦textfield。防止用户导航回来!

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>

demo : http://jsfiddle.net/epinapala/TxG5p/

演示:http://jsfiddle.net/epinapala/TxG5p/

#4

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

在我的例子中，我有一个用于日历的文本字段，每当我点击这个日历，选择date并按下backspace，它就会导航到上一个页面。为了防止这种情况发生，我只使用了这个字段

$('#myField').on("keydown", function (event) {
  if (event.keyCode === 8 || event.which === 8) { 
   event.preventDefault(); 
  } 
});

I thought to mention for some to help ;-)

我想提一些可以帮助你的;

#5

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

#6

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

#7

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

#8

For Internet Explorer , this worked for me :

对于Internet Explorer来说，这对我很有用:

window.addEventListener('keydown', function (e) {

窗口。addEventListener(keydown,函数(e){

    if (e.keyCode === 8) {
        if (e.target === document.body) {
        e.preventDefault();
        }
    }
}, true);

#9

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

#1