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

Posted 2023-02-22

【中文标题】离开编辑的html表单前提示确认

【英文标题】：Prompt confirm before Leaving edited html form

【发布时间】：2012-11-14 00:27:44

【问题描述】：

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

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

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

【问题讨论】：

你必须瞄准 window.confirm() 方法。

可能重复的问题***.com/questions/1704533/intercept-page-exit-event

@EricG 这不是屏幕截图中的确认提示。

@epascarello，同意，但实际上他的意思并不明显。 “onbeforeunload”函数不能手动调用，但可以编辑，这在“无论何时”显示时都会变得清晰。可以手动调用确认对话框，但默认情况下不知道页面是否被编辑。所以我的回答与我认为的“onbeforeonload”相比并不是那么无关紧要;）

@SubRed - 对于 Angular，这实际上不是一个重复的问题。看我的回答。

【参考方案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