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

Prevent backspace from navigating back in AngularJS

本文关键字：AngularJS 导航 回来      更新时间：2023-09-26

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

当用户进入一个包含要填写表单的页面并开始键入时，如果他按下退格键并且焦点不在输入文本上，则页面将进入上一个状态。

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

在角度 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();
          }
      });
    }
  ]);

普伦克尔演示。

您可以在演示中看到我仅用于 nodeName "INPUT"它不会阻止文本输入时退格键的默认值，但不会阻止textarea上的退格键默认值，因为我们没有在这种情况下处理它。

我无法评论"接受的答案"，但它将不正确，作为条件 

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

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

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

或写@ThisIsMarkSantiago的答案。

在控制器中添加以下脚本

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

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

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

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

相关文章：