关于javascript：防止BACKSPACE使用jQuery导航回来（像Google的主页）


Prevent BACKSPACE from navigating back with jQuery (Like Google's Homepage)

请注意，在谷歌的主页上，如果不关注任何元素，按backspace将把焦点放在搜索工具栏上，而不是导航回来。

我怎样才能做到这一点？

我的应用程序中的用户一直遇到这个问题。他们没有关注任何元素，只需按退格键就可以将它们从应用程序中弹出。

相关讨论

我将把一个事件处理程序绑定到keydown上，如果我们处理的是textarea或input之外的退格键，我将阻止该事件的默认操作：

1
2
3
4
5
$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});
相关讨论

我真的很喜欢安德鲁·惠特克的回答。但是，当它聚焦于只读、单选或复选框输入字段时，它仍将向后导航，并且不允许在ContentEditable元素上后退，因此我添加了一些修改。荣誉属于安德鲁·惠特克。

1
2
3
4
5
$(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();
    }
});

目前看来，似乎有必要从[ContentEditable]开始就在HTML中进行每一个变体[ContentEditable]！=[内容可编辑=真]。

相关讨论

谷歌这样做有点酷。当你按退格键时，它们会聚焦文本字段，阻止用户返回！

您可以尝试相同的方法：

1
2
3
4
5
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript">
<input id="target" type="text" />

<script type="text/javascript">
$(document).keydown(function(e) { if (e.keyCode == 8) $('#target').focus(); });

演示：http://jsfiddle.net/epinapala/txg5pala/

相关讨论

这里是一个在IE、Chrome和Firefox上测试的简单解决方案。

1
2
3
4
5
6
7
8
$(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();
    }
}});

要停止导航，只需使用此代码即可！

1
2
3
4
5
$(document).on("keydown", function (event) {        
   if (event.keyCode === 8) {
      event.preventDefault();
    }
  });

但对于输入字段类型text/textarea，这种情况也会发生。为了限制这些字段，您可以使用

1
2
3
4
5
$(document).on("keydown", function (event) {
  if (event.which === 8 && !$(event.target).is("input, textarea")) {
   event.preventDefault();
  }
});

在我的例子中，我有一个日历的文本字段，每当我点击那个日历时，选择日期并按退格键，它就会回到上一页。为了防止它出现在那个领域，我只使用了

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

我想提一下有人帮忙；—)

这是旧的，但这些答案仍然允许您退格和导航时，重点放在一个单选按钮。您还需要筛选输入类型。以上所有答案的功劳如下：

1
2
3
4
5
$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input[type='text']:not([readonly]), textarea")) {
        e.preventDefault();
    }
});
相关讨论

还处理了只读文本框

1
2
3
4
5
6
$(document).keydown(function (e) {
        var activeInput = $(document.activeElement).is("input[type=text]:not([readonly]):focus, textarea:focus");
        if (e.keyCode === 8 && !activeInput) {
            return false;
        };
    });

对于Internet Explorer，这对我很有用：

window.addEventListener('keydown'，函数(e){

1
2
3
4
5
6
    if (e.keyCode === 8) {
        if (e.target === document.body) {
        e.preventDefault();
        }
    }
}, true);

我在互联网上尝试过许多代码片段，但没有得到满意的结果。IE(IE11)和Crome的新浏览器版本打破了我以前的解决方案，但这里是我使用IE11+Crome+firefox时的解决方案。该代码防止退格，用户不会丢失在文本字段中键入的任何内容：

1
2
3
4
5
6
7
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);