43

请注意，在 Google 的主页上，没有任何元素的焦点，按 BACKSPACE 键会将焦点放在搜索工具栏中，而不是向后导航。

我怎样才能做到这一点？

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

4

9 回答 9

66

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

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});
于 2012-06-20T02:48:40.427 回答
24

我真的很喜欢 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();
    }
});

目前，似乎有必要拥有 HTML 中的每个变体 [contentEditable]，因为 [contentEditable] ！= [contentEditable=true]。

于 2012-12-07T03:31:42.807 回答
11

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

您可以尝试相同的方法：

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

于 2012-06-20T02:53:12.320 回答
2

这是一个在 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();
    }
}});
于 2015-05-22T04:06:31.787 回答
1

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

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input[type='text']:not([readonly]), textarea")) {
        e.preventDefault();
    }
});
于 2013-10-16T03:31:33.860 回答
1

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

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

我想提一些帮助;-)

于 2015-11-30T14:04:43.197 回答
0

我已经尝试了互联网上的许多代码片段，但没有满意的结果。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);
于 2014-10-07T07:36:11.320 回答
0

对于 Internet Explorer，这对我有用：

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

    if (e.keyCode === 8) {
       if (e.target === document.body) {
           e.preventDefault();
       }
    }
}, true);
于 2015-01-20T13:28:58.167 回答
0

也处理只读文本框

$(document).keydown(function (e) {
        var activeInput = $(document.activeElement).is("input[type=text]:not([readonly]):focus, textarea:focus");
        if (e.keyCode === 8 && !activeInput) {
            return false;
        };
    });
于 2016-07-20T22:05:36.210 回答