Advertisement
  1. Code
  2. JavaScript

Bestätigen Sie Ja oder Nein mit JavaScript

by
Read Time:5 minsLanguages:

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

In diesem kurzen Artikel wird erläutert, wie Sie das Bestätigungsdialogfeld mit JavaScript anzeigen. Im Bestätigungsdialogfeld können Sie Aktionen basierend auf den Benutzereingaben ausführen.

JavaScript ist eine der Kerntechnologien des Webs. Die meisten Websites verwenden es, und alle modernen Webbrowser unterstützen es, ohne dass Plugins erforderlich sind. Hier bei Envato Tuts+ besprechen wir Tipps und Tricks, die Ihnen bei Ihrer täglichen JavaScript-Entwicklung helfen.

Als JavaScript-Entwickler müssen Sie häufig Benutzereingaben in Form von Ja- oder Nein-Fragen annehmen und basierend darauf bestimmte Operationen ausführen. Insbesondere gibt es bestimmte Vorgänge, die sensibel sind und nicht rückgängig gemacht werden können, und Sie möchten Benutzer warnen oder bestätigen, ob sie wirklich beabsichtigen, den Vorgang auszuführen, damit sie es nicht versehentlich tun. Wenn es beispielsweise einen Löschlink gibt, mit dem Sie eine Entität aus einer Datenbank löschen können, möchten Sie mit die Benutzer bitten zu bestätigen, dass sie sie wirklich löschen möchten. Selbst wenn Benutzer versehentlich auf den Löschlink klicken, haben sie zumindest die Möglichkeit, ihn abzubrechen.

In diesem Beitrag zeige ich Ihnen zwei Möglichkeiten, eine Benutzeraktion in JavaScript zu bestätigen: mit der confirm-Methode und mit einem versteckten Bestätigungs-div.

Syntax der confirm-Methode

In JavaScript können Sie die confirm-Methode des window-Objekts verwenden, um ein Dialogfeld anzuzeigen, und warten, bis der Benutzer es entweder bestätigt oder abgebrochen hat. Heute werden wir zusammen mit einem realen Beispiel besprechen, wie es funktioniert.

In diesem Abschnitt gehen wir auf die Syntax der window.confirm-Methode ein.

Die Syntax der confirm-Methode sieht folgende aus:

Die confirm-Methode verwendet ein einzelnes Argument vom Typ String, und Sie können eine Nachricht übergeben, die in einem Dialogfeld angezeigt werden soll. Es ist ein optionales Argument, aber Sie sollten eine vernünftige Nachricht übergeben - andernfalls wird ein leeres Dialogfeld mit Ja- und Nein-Optionen angezeigt und macht wahrscheinlich keinen Sinn für Ihre Besucher. Normalerweise liegt eine Nachricht in Form einer Frage vor, und einem Benutzer stehen zwei Optionen zur Auswahl.

In einem Dialogfeld gibt es zwei Schaltflächen: OK und Abbrechen. Wenn ein Benutzer auf die Schaltfläche OK klickt, gibt die confirm-Methode true zurück, und wenn ein Benutzer auf die Schaltfläche abbrechen klickt, gibt die confirm-Methode false zurück. So können Sie den Rückgabewert der confirm-Methode verwenden, um die Auswahl des Benutzers zu erfahren. (Wenn Sie möchten, dass die Schaltflächen etwas anderes sagen, wie zum Beispiel Ja und Nein, zeige ich Ihnen am Ende dieses Beitrags, wie es geht.)

Da das window-Objekt immer implizit ist, d.h. seine Eigenschaften und Methoden sind immer im gültigen Bereich, können Sie auch die confirm-Methode aufrufen, wie im folgenden Codeausschnitt gezeigt.

Es ist wichtig zu beachten, dass das Bestätigungsdialogfeld modal und synchron ist. Daher wird die Ausführung von JavaScript-Code gestoppt, wenn das Dialogfeld angezeigt wird, und es wird fortgesetzt, nachdem der Benutzer das Dialogfeld durch Klicken auf die Schaltfläche OK oder Abbrechen geschlossen hat.

Das ist also ein Überblick über die Syntax der confirm-Methode. Im nächsten Abschnitt gehen wir auf ein Beispiel aus der Praxis ein.

Ein reales Beispiel für die confirm-Methode

In diesem Abschnitt gehen wir auf ein reales Beispiel ein, das zeigt, wie Sie die confirm-Methode in JavaScript verwenden können.

Sehen Sie sich das folgende Beispiel an.

Wenn ein Benutzer auf die Option Mein Profil löschen! klickt, wird die deleteProfile-Funktion aufgerufen. In der deleteProfile-Funktion haben wir die confirm-Methode aufgerufen, die dem Benutzer das Bestätigungsdialogfeld zeigt.

Wenn ein Benutzer in diesem Bestätigungsdialogfeld auf die Schaltfläche OK klickt, leiten wir den Benutzer auf die Seite /deleteProfie.php um, die den Löschvorgang ausführt. Auf der anderen Seite, wenn ein Benutzer auf die Schaltfläche Abbrechen klickt, werden wir nichts tun. Die JavaScript-Ausführung wird angehalten, bis der Benutzer eine Auswahl trifft und das Bestätigungsdialogfeld schließt.

So können Sie die confirm-Methode in JavaScript verwenden, um ein Ja- oder Nein-Auswahldialogfeld anzuzeigen.

Bestätigen Sie Ja oder Nein mit einem ausgeblendeten Div

Es gibt einige Nachteile bei der Verwendung der confirm-Methode, um eine Benutzerbestätigung zu erhalten. Einer ist, dass das Bestätigungsdialogfeld nicht Teil der Benutzeroberfläche Ihrer App oder Website ist. Es wird nicht Ihr Branding oder Farbschema verwendet. Es kann auch nicht angepasst werden, z. B. wenn Sie Ja oder Nein anstelle von OK und Abbrechen sagen möchten. Schließlich ist das Bestätigungsdialogfeld modal, sodass der Benutzer, solange es angezeigt wird, nicht mit einem anderen Teil der Benutzeroberfläche Ihrer App interagieren kann.

Eine andere Möglichkeit, Ja oder Nein zu bestätigen, ist mit einem versteckten div auf Ihrer Seite. Sehen Sie sich das folgende Beispiel an:

In diesem Beispiel haben wir ein verstecktes Bestätigungs-div mit der ID confirm. Um das div anzuzeigen, setzen wir einfach seine hidden-Eigenschaft auf true. Wir setzen hidden auf true, wenn wir die Bestätigung anzeigen möchten, und setzen sie erneut auf false, um sie auszublenden.

Wie Sie sehen können, ermöglicht uns diese Methode zur Bestätigung von Ja oder Nein mehr Flexibilität und Anpassung als die window.confirm-Methode.

Schlussfolgerung

Heute haben wir zwei Möglichkeiten besprochen, um eine Benutzerbestätigung in JavaScript zu erhalten. Zuerst haben wir uns den einfachsten Weg angesehen: die window.confirm-Methode, die jedoch keine großartige Benutzererfahrung schafft. Dann habe ich Ihnen gezeigt, wie Sie ein verstecktes div verwenden, um eine Benutzerbestätigung mit mehr Kontrolle darüber zu erhalten, wie die Bestätigung aussehen und sich verhalten wird.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.