使用jQuery阻止BACKSPACE键导航返回（如Google主页）

Question

注意：当在Google主页上没有聚焦于任何元素时，按 BACKSPACE 键会将焦点放到搜索工具栏中，而不是导航回上一页。

我该如何解决这个问题？

我在我的应用程序中经常遇到用户遇到这个问题。他们没有聚焦在任何元素上，然后按 BACKSPACE 键，从而使他们退出了应用程序。

- FastTrack

---

这个问题的答案不够好。它们太复杂了，可能无法捕捉到所有意外导航的情况，并且可能会禁用不寻常输入字段中的正常“退格”功能。理想情况下，制作浏览器的公司应该默认禁用这个愚蠢的键绑定。在那之前，我建议仅当输入任何文本到表单字段时才确认导航。这里第二个答案看起来不错：https://dev59.com/z2435IYBdhLWcg3w-1R_ - Sam Watkins

这里有一个类似的问题，也有不充分的答案：https://dev59.com/ynI_5IYBdhLWcg3wK_zE - Sam Watkins

Answer 1

如果我们正在处理位于textarea或input之外的退格键，则我将绑定一个事件处理程序到keydown并防止该事件的默认操作：

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

- Andrew Whitaker

---

某人：我选择了这个答案，因为它会在焦点不在“input”或“textarea”时防止反向删除。 - FastTrack

@muhammadkashif：您遇到了什么问题？我刚在FF 17.0.1上尝试了一下，没有任何问题... - Andrew Whitaker

在我的情况下，我有一个页面作为弹出窗口在另一个页面中打开。当我按下退格键时，它会关闭弹出窗口并将我重定向到上一个页面。这只发生在FireFox浏览器中。我通过将keydown替换为keypress来处理它。但是，在所有控件都被禁用的页面上，Firefox无法捕获keypress事件。你能帮我解决这个问题吗？ - muhammad kashif

不要忘记 contentEditable divs... :) 请参见 https://dev59.com/ynI_5IYBdhLWcg3wK_zE - Neek

当点击“复选框”并输入“退格键”时，这不起作用。页面导航到后面。如何解决这个问题？ - Ankit

Answer 2

我非常喜欢Andrew Whitaker的回答。然而，当聚焦于只读、单选或复选输入字段时，它仍然会导航回去，并且不允许在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();
    }
});

目前看来，在HTML中需要有每个变体 [contentEditable]，因为[contentEditable]！=[contentEditable=true]。

- None

---

这样处理单选按钮更好，谢谢。最好使用 $(document).bind("keyup keydown") 来确保良好的实践。 - Jack Franzen

已在IE中进行测试，谢谢。 - Lucas

Answer 3

Google 做法很酷。当你按下退格键时，他们会将焦点放在文本字段上，防止用户回退！

你也可以尝试相同的方法：

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

- Eswar Rajesh Pinapala

---

谢谢你的回答！我选择了上面那个答案，因为它可以防止在焦点不在input或textarea上时一直按下BACKSPACE键。但是你的答案也非常有帮助。 - FastTrack

随时都可以！我只是想解释一下谷歌是如何做到这一点的（我认为它是一样的）.. :) - Eswar Rajesh Pinapala

尽管该方法适用于一个输入字段，且Google主页仅有一个输入字段，但是在有多个输入字段的页面上无法使用，因为删除文本将导致字段切换焦点到#target。这就是为什么安德鲁·惠特克的答案是更好的解决方案的原因。 - None

@J.Money - 我同意，但请理解我是在回答OP的问题。如果要做出假设来回答问题，可能会有成千上万个答案 :) - Eswar Rajesh Pinapala

@Eswar 是的，但编写可重用代码是一个好习惯。虽然您的代码可以在非常特定的页面上使用，但 Andrew 的代码可以在您的答案所涉及的一组页面以及许多其他页面上使用。有成千上万种可能的假设和可能的答案，但 Andrew 的五行代码可以解决成千上万种可能的情况。我并不是说您没有回答问题。我只是在说明，尽管您的答案是一种解决方案，但由于其许多缺点，它并不是最佳解决方案。希望人们能理解这些缺点，并选择最适合他们的答案。 - None

@J.Money：这就是我为什么是那些+1他的答案之一的原因。我并不是说我的答案是最好的，我只是解释了为什么我给出了我的答案。我的意图是回答OP的问题-解决他所寻找的内容（Google所做的）。所以我认为我们没有必要争论。 - Eswar Rajesh Pinapala

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

- spuentep

Answer 5

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

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

- KingOfHypocrites

---

不错的发现，但最好具体指定 input:not([type=radio])，因为 input[type=text] 会使您无法在密码或电子邮件输入字段中删除。我进行了更多测试并更新了我的答案。 - None

Answer 6

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

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

但是这也会发生在文本/文本区域输入字段中。因此，要限制这些字段，您可以使用：

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

我想提一下，帮助一些人；-)

- Syed Ehtsham Abbas

Answer 7

已处理只读文本框

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

- Vijai

Answer 8

对于Internet Explorer，这个方法对我有效：

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

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

- Gurpreet Singh

Answer 9

我尝试了许多互联网上的代码片段，但都没有令人满意的结果。新版IE（IE11）和Chrome浏览器破坏了我的以前的解决方案，但以下代码适用于IE11 + Chrome + 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);

- LarsOlsen