离开编辑的html表单前提示确认答案

【问题标题】：Prompt confirm before Leaving edited html form离开编辑的html表单前提示确认
【发布时间】：2012-11-14 00:27:44
【问题描述】：

如果用户试图留下未保存的已编辑表单，则会弹出一个消息框

“此页面要求您确认是否要离开 - 您输入的数据可能不会被保存。离开页面并留在页面上”

我们可以通过浏览器的一些特殊功能来调用这个确认框吗？我想在 AngularJS 应用程序中实现它

【问题讨论】：

你必须瞄准 window.confirm() 方法。
可能重复的问题stackoverflow.com/questions/1704533/intercept-page-exit-event
@EricG 这不是屏幕截图中的确认提示。
@epascarello，同意，但实际上他的意思并不明显。 “onbeforeunload”函数不能手动调用，但可以编辑，这在“无论何时”显示时都会变得清晰。可以手动调用确认对话框，但默认情况下不知道页面是否被编辑。所以我的回答与我认为的“onbeforeonload”相比并不是那么无关紧要;）
@SubRed - 对于 Angular，这实际上不是一个重复的问题。看我的回答。

标签： javascript angularjs forms

【解决方案1】：

术士的回答部分正确，但这样做会破坏可测试性。

在 Angular 中，您会想要使用 $window，并且您会想要在表单上查看 $dirty。您需要有一个命名表单，请注意下面的name="myForm"。然后你可以$watch$dirty在你的$scope的表格上：

app.controller('MainCtrl', function($scope, $window) {
  $scope.name = 'World';
  var win = $window;
  $scope.$watch('myForm.$dirty', function(value) {
    if(value) {
      win.onbeforeunload = function(){
        return 'Your message here';
      };
    }
  });
});

HTML

<form name="myForm">
  Name: <input type="text" ng-model="name"/>
</form>

这里有一个 plunk 来演示：http://plnkr.co/edit/3NHpU1

【讨论】：

谢谢。但是在 AngularJS 中，我们有很多局部视图，每个都有形式。此事件不会被触发，请不要更改视图。在视图更改之前是否有任何事件被调用。
那么听起来您并没有正确使用有角度的表格。如果你有<form name="whatever">，那么你应该可以$scope.$watch('whatever.$dirty)，你必须为每个表单都这样做，我想这有点痛苦。
@StefanLobato 某些浏览器不会显示提示，除非用户首先与页面交互。请参阅此处的注释：developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

【解决方案2】：

如果您想在确定您的表单脏时取消路由更改，您可以这样做：

$rootScope.$on('$locationChangeStart', function(event) {
  event.preventDefault();
});

这将取消路由并让您留在当前页面。

【讨论】：

【解决方案3】：

您可以使用“onbeforeunload”事件。语法如下：

window.onbeforeunload = function () {
    return "Your text string you want displayed in the box";
}

此事件将弹出您在上面描述的确认对话框，询问用户是否真的想离开页面。

希望这会有所帮助。

【讨论】：

【解决方案4】：

我喜欢@blesh 的回答，但我认为它无法解释内部 url 更改（例如，如果您在应用程序上使用 ngView 并访问不同的内部视图）。 window.onbeforeunload 永远不会在哈希 # 更改时被调用。在这种情况下，您必须同时监听 window.onbeforeunload 和 $locationChangeStart：

app.controller('OtherCtrl', ['$scope', '$window', '$location', '$rootScope', function($scope, $window, $location, $rootScope) {
  $scope.message = "This time you get a confirmation.";
  $scope.navigate = function() {
    $location.path("/main");
  }
  var getMessage = function() {
    if($scope.myForm.$dirty) {
      return $scope.message;
    } else {
      return null;
    }
  }
  $window.onbeforeunload = getMessage;
  var $offFunction = $rootScope.$on('$locationChangeStart', function(e) {
    var message = getMessage();
    if(message && !confirm($scope.message)) {
      e.preventDefault();
    } else {
      $offFunction();
    }
  });
}]);

在此处查看 plunkr：http://plnkr.co/edit/R0Riek?p=preview

【讨论】：

我必须同意您的评估。仅监听 onbeforeunload 并不能处理角度路由变化，这是解决此问题的一个非常重要的组成部分。

【解决方案5】：

您可以使用 jQuery 使用这个简单的不显眼的代码轻松保护您的表单。在您的 </body> 结束标记之前添加。

(function () {
    jQuery('form').one('change', function () {
        window.onbeforeunload = function () {
            return 'Form protection';
        };
    });
})();

【讨论】：

【解决方案6】：

我认为您需要使用 $window.alert 或 $window.confirm 或 beforeroutechange

Angular documentation

【讨论】：