1428 Stimmen

JavaScript: Warnung beim Verlassen der Seite anzeigen

Info von Stefan Trost | Letztes Update am 30.04.2021 | Erstellt am 02.12.2013

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.

AntwortenPositivNegativDatumStimmen
Avatar
06 Stimmen

Danke.

Hatte ich gerade gebraucht. Meine Funktion bisher meckerte schon bei onblur und bei mehreren Feldern auf einer Seite kommt das nicht so gut.
03.12.2014 um 18:03

AntwortenPositiv Negativ
Avatar
57 Stimmen

Top! Auch wenn die Kommentarfunktion auf dieser Seite etwas nervt, weil ich mindestens 100 Zeichen eingeben muss... Trotzdem, danke für das Script!
18.02.2015 um 12:45

AntwortenPositiv Negativ
Antworten

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.