JavaScript-Bestätigung: Wählen Sie Ja oder Nein

In diesem kurzen Artikel besprechen wir, wie man mit JavaScript einen Bestätigungsdialog anzeigt. Mit Bestätigungsdialogfeldern können Sie Aktionen basierend auf Benutzereingaben ausführen.

JavaScript ist eine der Kerntechnologien des Internets. Es wird von den meisten Websites verwendet und von allen modernen Webbrowsern unterstützt, ohne dass Plugins erforderlich sind. Hier bei Envato Tuts+ besprechen wir Tipps und Tricks, die Ihnen bei Ihrer täglichen JavaScript-Entwicklung helfen können.

Als JavaScript-Entwickler müssen Sie häufig Benutzereingaben in Form einer Ja- oder Nein-Frage einholen und darauf basierend eine Aktion ausführen. Insbesondere sind einige Aktionen vertraulich und können nicht rückgängig gemacht werden, und Sie möchten dem Benutzer eine Warnung oder Bestätigung geben, dass er die Aktion tatsächlich ausführen wollte, damit er sie nicht versehentlich ausführt. Wenn es beispielsweise einen Löschlink gibt, mit dem Sie eine Entität aus der Datenbank löschen können, müssen Sie mit dem Benutzer bestätigen, ob er sie tatsächlich löschen möchte. Selbst wenn ein Benutzer also versehentlich auf den Löschlink klickt, hat er zumindest die Möglichkeit, den Vorgang abzubrechen.

In diesem Artikel zeige ich Ihnen zwei Möglichkeiten, Benutzeraktionen in JavaScript zu bestätigen: mit confirm 方法和使用隐藏确认 div.

confirm Methodensyntax

In JavaScript können Sie die window 对象的 confirm-Methode des window-Objekts verwenden, um ein Dialogfeld anzuzeigen und auf die Bestätigung oder den Abbruch durch den Benutzer zu warten. Heute besprechen wir die Funktionsweise anhand eines praktischen Beispiels.

In diesem Abschnitt stellen wir die Syntax von window.confirm-Methoden vor.

Die Syntax der

confirm-Methode lautet wie folgt:

var result = window.confirm(message);

Die

confirm-Methode benötigt ein einzelnes String-Argument, in dem Sie die Nachricht übergeben, die im Dialog angezeigt werden soll. Dies ist ein optionaler Parameter, aber Sie müssen eine sinnvolle Nachricht übergeben, andernfalls wird ein leeres Dialogfeld mit Ja- und Nein-Optionen angezeigt, das für Ihre Besucher möglicherweise nichts bedeutet. Typischerweise hat die Nachricht die Form einer Frage und bietet dem Benutzer zwei Optionen zur Auswahl.

Im Dialogfeld gibt es zwei Schaltflächen: OK und Abbrechen. Wenn der Benutzer auf die Schaltfläche „OK“ klickt, gibt die Bestätigungsmethode true，如果用户点击取消按钮，confirm方法返回false zurück. So können Sie die Auswahl des Benutzers anhand des Rückgabewerts der Bestätigungsmethode verstehen. (Wenn Sie möchten, dass Ihre Schaltflächen etwas anderes sagen, z. B. Ja und Nein, zeige ich Ihnen am Ende dieses Artikels, wie das geht.)

Da das window-Objekt immer implizit ist, d. h. seine Eigenschaften und Methoden liegen immer im Gültigkeitsbereich, können Sie auch die window 对象始终是隐式的，也就是说它的属性和方法始终在作用域内，因此您还可以调用 confirm-Methode aufrufen, wie im folgenden Codeausschnitt gezeigt.

var result = confirm(message);

Es ist zu beachten, dass der Bestätigungsdialog modal und synchron ist. Daher stoppt die Ausführung des JavaScript-Codes, wenn das Dialogfeld angezeigt wird, und wird fortgesetzt, nachdem der Benutzer das Dialogfeld durch Klicken auf die Schaltfläche „OK“ oder „Abbrechen“ schließt.

Dies ist die Syntaxübersicht der confirm-Methode. Im nächsten Abschnitt stellen wir ein Beispiel aus der Praxis vor.

confirmEchte Methodenbeispiele

In diesem Abschnitt zeigen wir anhand eines praktischen Beispiels, wie die confirm-Methode in JavaScript verwendet wird.

Schauen Sie sich das Beispiel unten an.

Wenn ein Benutzer auf Mein Profil löschen klickt! Wenn die -Taste gedrückt wird, wird die deleteProfile 函数。在deleteProfile-Funktion aufgerufen. Wir rufen die Bestätigungsmethode auf, die dem Benutzer ein Bestätigungsdialogfeld anzeigt.

Wenn der Benutzer schließlich im Bestätigungsdialog auf die Schaltfläche OK klickt, leiten wir den Benutzer zur Seite /deleteProfile.php weiter, auf der die Löschaktion ausgeführt wird. Wenn der Benutzer hingegen auf die Schaltfläche „Abbrechen“ klickt, führen wir keine Aktion aus. Die Ausführung von JavaScript wird angehalten, bis der Benutzer eine Auswahl trifft und den Bestätigungsdialog schließt. So rendern Sie einen Ja- oder Nein-Auswahldialog mithilfe der Bestätigungsmethode in JavaScript.

Bestätigen Sie Ja oder Nein mit Hidden Div

Es gibt einige Nachteile bei der Verwendung der

-Methode zum Erhalten einer Benutzerbestätigung. Einer davon ist, dass der Bestätigungsdialog nicht Teil der Benutzeroberfläche Ihrer App oder Website ist. Ihr Branding oder Farbschema wird nicht verwendet. Es ist auch nicht anpassbar, wenn Sie beispielsweise „Ja“ oder „Nein“ anstelle von „OK“ und „Abbrechen“ sagen möchten. Schließlich ist der Bestätigungsdialog modal, sodass der Benutzer, solange er angezeigt wird, nicht mit anderen Teilen der App-Oberfläche interagieren kann.

confirmEine andere Möglichkeit, Ja oder Nein zu bestätigen, besteht darin, ein verstecktes Div auf der Seite zu verwenden. Schauen Sie sich das folgende Beispiel an:

In diesem Beispiel haben wir ein verstecktes Bestätigungs-Div mit der ID confirm。要显示 div，我们只需将其 hidden 属性设置为 true。当我们想要显示确认信息时，我们将 hidden 设置为 true，并再次将其设置为 false, um es zu verbergen.

Wie Sie sehen, bietet uns diese Methode der Ja- oder Nein-Bestätigung mehr Flexibilität und Anpassungsfähigkeit als die window.confirm-Methode.

Fazit

Heute haben wir zwei Möglichkeiten besprochen, um eine Benutzerbestätigung in JavaScript zu erhalten. Schauen wir uns zunächst die einfachste Methode an: die window.confirm-Methode. Dies führt jedoch nicht zu einer guten Benutzererfahrung. Dann habe ich Ihnen gezeigt, wie Sie ein verstecktes Div verwenden, um eine Benutzerbestätigung zu erhalten und mehr Kontrolle darüber zu haben, wie die Bestätigung aussieht und sich verhält.

Das obige ist der detaillierte Inhalt vonJavaScript-Bestätigung: Wählen Sie Ja oder Nein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!