13 27 Stimmen

JavaScript: Warnung beim Verlassen der Seite anzeigen

Info von Stefan Trost | 02.12.2013 um 22:02 Uhr

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

Wir benutzen dafür in reinem JavaScript 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?';
});

Hinweis nur zeigen wenn etwas eingegeben wurde

Eine entsprechende Warnung kommt meistens dann zum Einsatz, wenn dem Nutzer die Möglichkeit geboten wird, ein Formular auszufüllen. In diesem Fall ist es aber 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 tatsächlich der Tab oder der Browser geschlossen wurde.

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
-15 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 Uhr

AntwortenPositiv Negativ
46 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 Uhr

AntwortenPositiv Negativ
Antworten

Über den Autor

Avatar AutorSoftware 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 | Nachricht

 

Ähnliche Themen

Wichtiger Hinweis

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.