Question

请注意，在Google的主页上，不关注任何元素，按BACKSPACE会将焦点放入搜索工具栏，而不是导航回来。

我怎样才能做到这一点？

我的应用中的用户一直遇到这个问题。他们没有专注于任何元素，并点击BACKSPACE将其抛出应用程序。

Answer 1

我会将事件处理程序绑定到keydown，并在我们处理textarea或input之外的退格键时阻止该事件的默认操作：

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

Answer 2

我非常喜欢Andrew Whitaker的回答。但是，当关注readonly，radio或checkbox输入字段时，它仍会返回导航，并且不允许在contentEditable元素上退格，所以我添加了一些修改。归功于Andrew Whitaker。

$(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]！= [contentEditable = true]。

Answer 3

谷歌这样做的方式有点酷。当您按退格键时，它们会聚焦文本字段，阻止用户导航回来！

您可以尝试相同的方法：

<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>

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

Answer 4

以下是在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();
    }
}});

Answer 5

这是旧的，但这些答案仍然允许您在专注于单选按钮时退格和导航。您还需要过滤输入类型。感谢上面的所有答案：

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input[type='text']:not([readonly]), textarea")) {
        e.preventDefault();
    }
});

Answer 6

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

$(document).on("keydown", function (event) {        
   if (event.keyCode === 8) {
      event.preventDefault();
    }
  });

但是输入字段类型text / textarea也会发生这种情况。因此，要限制这些字段，您可以使用

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

在我的情况下，我有一个日历文本字段，每当我点击该日历时，选择日期并按退格键，然后导航回上一页。为了防止该字段，我只使用

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

我想提一些帮助; - ）

Answer 7

我在互联网上尝试了很多代码片段而没有满足结果。新的浏览器版本的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);

Answer 8

对于Internet Explorer，这对我有用：

window.addEventListener（＆＃39; keydown＆＃39;，function（e）{

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

Answer 9

处理只读文本框

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

防止BACKSPACE使用jQuery导航（如Google的主页）

9 个答案: