防止退格键在 AngularJS 中导航回来答案

【问题标题】：Prevent backspace from navigating back in AngularJS防止退格键在 AngularJS 中导航回来
【发布时间】：2015-05-14 09:16:48
【问题描述】：

我在 AngularJS webapp 中遇到了这个问题。

当用户进入一个需要填写表单的页面并开始输入时，如果他按下退格键并且焦点不在输入的文本上，那么页面会转到之前的状态。

我使用 jQuery 查找了 this solution，但这似乎不是在 AngularJS 中实现此目标的合适方法。

【问题讨论】：

标签： javascript jquery angularjs backspace

【解决方案1】：

我在这里得到了这个答案： How can I disabling backspace key press on all browsers?

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

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

【讨论】：

这似乎是一个非常简洁的解决方案。但我已经让它与 jQuery 一起工作了。如果可能的话，我们的想法是使用 AngularJS 来解决这个问题......
angular 内部使用 jqLite。尽管如此，您只需要编写 javascript。
我不能在密码字段上退格，而且我不知道 === 运算符。我用以下方法修复它： if ((nodeName == 'input' && (e.target.type == 'text' || e.target.type == 'password')) || nodeName == 'textarea') {

【解决方案2】：

angular js中有$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 Demo.

您可以在演示中看到我仅用于"INPUT" nodeName 并且它不会阻止文本输入时退格键的默认设置，但不会阻止textarea 的默认设置，因为我们尚未在该条件下处理它。

【讨论】：

@seb 怎么会出现基本错误？坦率地说，这只是用于退格和任何元素，无论是输入还是选择。
@seb 只是想知道网页中是否有任何东西可以同时聚焦两个元素，因为 afaik 是不可能的。所以使用&& 失败了。
查看 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"，无论按下什么键都是真的。
你应该考虑在 if 条件下也可以编辑标签。 if (e.which === 8 && !e.target.isContentEditable && (!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly)) { e.preventDefault( ); }

【解决方案3】：

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

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

有逻辑错误，所以你可以使用

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

或写@ThisIsMarkSantiago 的答案。

【讨论】：

【解决方案4】：

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

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

【讨论】：