JavaScript: Warnung beim Verlassen der Seite anzeigen

In dieser Info möchte ich euch zeigen, wie man mit der Hilfe von JavaScript eine Warnung anzeigen lassen kann, wenn ein Nutzer versucht, die Seite zu verlassen.

Dies kann zum Beispiel sinnvoll sein, um Nutzer davor zu bewahren das Browserfenster versehentlich zu schließen, wenn ein Formular ausgefüllt aber noch nicht abgeschickt wurde. Aber dazu später. Zunächst schauen wir uns an, wie man die Meldung immer anzeigen kann.

Hinweis bei jedem Verlassen der Seite anzeigen

Soll der Hinweis beim Verlassen der Seite immer angezeigt werden, unabhängig davon was der Besucher gemacht hat, können wir den folgenden Code verwenden.

In reinem JavaScript (ohne jQuery) arbeiten wir mit window.onbeforeunload:

window.onbeforeunload = function() {
   return 'Möchten Sie die Seite wirklich verlassen?';
};

Und mit jQuery sieht dieselbe Funktion folgendermaßen aus:

$(window).bind('beforeunload', function() {
  return 'Möchten Sie die Seite wirklich verlassen?';
});

Warnung nur zeigen wenn etwas eingegeben wurde

Ein typischer Anwendungsfall für die Warnung ist auf Seiten, auf denen den Nutzern die Möglichkeit geboten wird, ein Formular auszufüllen. In diesem Fall ist es jedoch nur dann sinnvoll, den Hinweis anzuzeigen, wenn auch wirklich etwas ausgefüllt wurde und wenn die Seite auf einem anderen Weg als über den Submit-Button des Formulars verlassen wurde. Also zum Beispiel, wenn versehentlich der Tab oder der Browser geschlossen wurde oder der Nutzer auf einen Link geklickt hat und die eingegebenen Daten drohen verloren zu gehen.

Und genau diesen Fall abzudecken, können wir unser Skript entsprechend erweitern:

var submitted = false;
var userinput = false;
 
$(document).ready(function() {
  $("form").submit(function() {
    submitted = true;
  });

  $(".userinputs").change(function() {
    userinput = true;
  });
 
  window.onbeforeunload = function () {
    if (userinput && !submitted) {
      return 'Sie haben das Formular noch nicht abgesendet.\
      Möchten Sie die Seite wirklich verlassen?';
    }
  }
});

Zunächst definieren wir uns die Variablen "submitted" (wurde der Submit-Button geklickt) und "userinput" (hat der Nutzer etwas eingeben). Anschließend erweitern wir die window.onbeforeunload Funktion um eine if-Abfrage: nur dann wenn die Variable "userinput" auf "true" und "submitted" auf "false" steht, soll der Warnhinweis-Dialog gezeigt werden. Ansonsten kann der Nutzer ohne eine Warnung die Seite verlassen.

Die Variablen "submitted" und "userinput" setzen wir auf "true", sobald der Nutzer auf den Submit-Button klickt oder den Inhalt eines Elements mit der Klasse "userinputs" ändert. Entsprechend sollten alle Elemente die überwacht werden sollen, diese Klasse haben oder man passt das Skript dahingehend an, dass man direkt den Namen der Elemente abfragt.