防止在AngularJS中使用退格键导航返回

Question

我在我的AngularJS网络应用程序中遇到了这个问题。

当用户进入一个包含表单的页面并开始输入时，如果他按下退格键并且焦点不在输入文本上，那么页面会返回到先前的状态。

我查阅了这个jQuery解决方案，但它似乎不是在AngularJS中实现这一目标的合适方法。

- gyss

Answer 1

在AngularJS中有$document：

angular.module('yourModule', [])
  .controller('yourController', ['$scope', '$document', function($scope, $document) {
      $document.on('keydown', function(e){
          if(e.which === 8 && ( e.target.nodeName !== "INPUT" && e.target.nodeName !== "SELECT" ) ){ // you can add others here inside brackets.
              e.preventDefault();
          }
      });

    }
  ]);

Plnkr演示。

在这个演示中，我只使用了 "INPUT" 的nodeName并且它不能阻止文本输入框上的退格键默认行为，但是对于textarea，因为我们没有在条件中处理它，所以默认行为不会被阻止。

- Jai

---

@seb，这怎么可能是一个“初级错误”？坦白地说，这只是针对退格键和任何元素，无论是输入还是选择。 - Jai

@seb，我只是好奇想知道网页中是否有任何可以同时聚焦两个元素的东西，因为据我所知这是不可能的。因此使用 && 会失败。 - Jai

请参考Tolya的回答。e.which === 8 && e.target.nodeName !== "INPUT" || e.target.nodeName !== "SELECT" 等同于 (e.which === 8 && e.target.nodeName !== "INPUT") || e.target.nodeName !== "SELECT"，因此如果 e.target.nodeName !== "SELECT"，无论按下哪个键都是正确的。 - Seb

在if条件语句中，您应该同时考虑可编辑标签。 如果(e.which === 8 && !e.target.isContentEditable && (!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly))，那就e.preventDefault()。 - SajithK

Answer 2

我无法评论“接受的答案”，但它将不能正常工作，因为条件不符。

e.which === 8 && e.target.nodeName !== "INPUT" || e.target.nodeName !== "SELECT"

带有逻辑错误，因此您可以使用。

e.which === 8 && e.target.nodeName !== "INPUT" && e.target.nodeName !== "SELECT"

或者回答@ThisIsMarkSantiago所写的内容。

- user4547691

Answer 3

在你的控制器中添加以下脚本：

var rx = /INPUT|SELECT|TEXTAREA/i;

$document.on("keydown keypress", function(e){
    if( e.which == 8 ){ // 8 == backspace
        if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
            e.preventDefault();
        }
    }
});

或者您可以使用Jquery。

  $(function(){
      var regx = /INPUT|SELECT|TEXTAREA/i;

      $(document).bind("keydown keypress", function(e){
          if( e.which == 8 ){ // 8 == backspace
              if(!regx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                  e.preventDefault();
              }
          }
      });
  });

- Libu Mathew

Answer 4

我在这里找到了答案： 如何在所有浏览器上禁用退格键按键？

$(document).keydown(function(e) {
    var nodeName = e.target.nodeName.toLowerCase();

    if (e.which === 8) {
        if ((nodeName === 'input' && e.target.type === 'text') ||
            nodeName === 'textarea') {
            // do nothing
        } else {
            e.preventDefault();
        }
    }
});

只需将其放入您的控制器中即可。

- ThisIsMarkSantiago

---

这似乎是一个相当不错的解决方案。但我已经使用jQuery使其工作了。如果可能的话，想法是使用AngularJS来解决这个问题... - gyss

Angular内部使用jqLite。但是，你只需要编写JavaScript即可。 - Jai

我无法在密码字段上使用退格键，也不知道 === 运算符。我用以下代码进行修复： if ((nodeName == 'input' && (e.target.type == 'text' || e.target.type == 'password')) || nodeName == 'textarea') { - Diego