Heim > Artikel > Web-Frontend > Popup-Meldungen mithilfe von Ereignissen interpretieren?

Popup-Meldungen mithilfe von Ereignissen interpretieren?

PHPznach vorne: 2023-08-24 22:37:021187Durchsuche

Wir können das Popup-Feld verwenden, um App-Benutzern eine Popup-Nachricht anzuzeigen. In diesem Tutorial lernen wir verschiedene Arten von JavaScript-Popups kennen.

Drei verschiedene Arten von Popup-Boxen werden im folgenden JavaScript bereitgestellt.

Alarmbox
Bestätigungsfeld
Prompt-Box

Nachfolgend erfahren Sie nacheinander alle Pop-up-Boxen.

Alarmbox

Wir können die Methode window.alert() verwenden, um das Warnfeld anzuzeigen. Die Nachricht wird lediglich in einem Popup-Fenster angezeigt.

Wenn wir dem Benutzer eine Nachricht übermitteln müssen, können wir das Benachrichtigungsfeld verwenden. Wenn sich ein Benutzer beispielsweise bei der Anwendung anmeldet, wird eine Meldung wie „Sie haben sich erfolgreich angemeldet“ angezeigt.

Grammatik

Benutzer können Warnfelder in JavaScript anzeigen, indem sie der folgenden Syntax folgen.

alert(message)

Parameter

Nachricht – Dies ist eine Nachricht, die im Warnfeld angezeigt wird.

Beispiel

Wenn der Benutzer in diesem Beispiel auf die Schaltfläche klickt, rufen wir die Funktion showAlert() auf. Die Funktion showAlert() verwendet die Methode alarm(), um ein Warnfeld anzuzeigen.

In der Ausgabe kann der Benutzer beobachten, dass beim Drücken der Schaltfläche das Warnfeld mit der als Parameter übergebenen Nachricht angezeigt wird. Wenn wir im Warnfeld auf die Schaltfläche „OK“ klicken, verschwindet es.

<html>
<body>
   <h2> Showing the alert message using the <i> alert box. </i> </h2>
   <button onclick = "showAlert()"> Show Alert Message </button>
</body>
   <script>
      // function to show alert
      function showAlert() {
         alert("This is the important message");
      }
   </script>
</html>

Bestätigungsfeld

Wenn wir eine Benutzerbestätigung benötigen, können wir das Bestätigungsfeld verwenden. Beispielsweise müssen wir die Bestätigung des Benutzers einholen, bevor wir einige wichtige Daten löschen.

Wir können die Methode window.confirm() verwenden, um das Bestätigungsfeld anzuzeigen. Das Bestätigungsfeld enthält zwei Schaltflächen mit den Texten „OK“ und „Abbrechen“. Gibt „false“ zurück, wenn der Benutzer die Schaltfläche „Abbrechen“ gedrückt hat; andernfalls „true“.

Grammatik

Benutzer können das Bestätigungsfeld in JavaScript anzeigen, indem sie der folgenden Syntax folgen.

confirm(message);

Parameter

Nachricht – Dies ist eine Bestätigungsnachricht, die im Bestätigungsfeld angezeigt wird.

Rückgabewert

Es gibt wahre und falsche boolesche Werte zurück, je nachdem, ob der Benutzer die Schaltfläche „OK“ oder „Abbrechen“ gedrückt hat.

Beispiel

In diesem Beispiel verwenden wir die Bestätigungsmethode () des Fensterobjekts, um das Bestätigungsfeld anzuzeigen. Darüber hinaus zeigen wir dem Benutzer unterschiedliche Meldungen auf dem Bildschirm an, je nachdem, ob er im Bestätigungsfeld auf die Schaltfläche „OK“ oder „Abbrechen“ klickt.

<html>
<body>
   <h2> Showing the confirm box using the <i> confirm() </i> method.</h2>
   <p id = "output"> </p>
   <button onclick = "showConfirm()"> Show Confirm box </button>
</body>
   <script>
      let message = "Kindly confirm once by pressing the ok or cancel button!";
      // function to show confirm box
      function showConfirm() {

         // showing the confirm box with the message parameter
         let returnValue = confirm(message);
         let output = document.getElementById("output");

         // According to the returned boolean value, show the output
         if (returnValue) {
            output.innerHTML += "You pressed the ok button.";
         } else {
            output.innerHTML += "You pressed the cancel button.";
         }
      }
   </script>
</html>

Prompt-Box

Eingabeaufforderungsfeld ist die dritte Möglichkeit, Popup-Nachrichten in JavaScript anzuzeigen. Eingabeaufforderungsfelder sind erweiterte Versionen von Alert() und Bestätigungsfeldern. Es zeigt eine Nachricht in einem Feld an und akzeptiert Eingaben des Benutzers. Darüber hinaus enthält es Schaltflächen „OK“ und „Abbrechen“ zum Übermitteln von Eingabewerten.

Grammatik

Benutzer können das Eingabeaufforderungsfeld verwenden, um Benutzereingaben in JavaScript gemäß der folgenden Syntax zu erhalten.

prompt(message, placeholder);

Wir haben die statische Methode prompt() in der obigen Syntax aufgerufen.

Parameter

Nachricht – Dies ist eine Nachricht, die über dem Eingabefeld angezeigt wird.
Platzhalter – Dies ist der Text, der im Eingabefeld angezeigt wird.

Rückgabewert

Wenn der Benutzer die OK-Taste drückt, wird der Eingabewert zurückgegeben; andernfalls ist er leer.

Beispiel

In diesem Beispiel haben wir die Funktion takeInput() erstellt, die dem Benutzer einen Tooltip anzeigt. Wir verwenden ein Eingabeaufforderungsfeld, um den vom Benutzer eingegebenen Namen abzurufen.

Wenn der Benutzer nach Eingabe des Eingabewerts die OK-Taste drückt, zeigen wir die Eingabe des Benutzers auf dem Bildschirm an.

<html>
<body>
   <h2> Showing the prompt box using the <i> prompt() </i> method. </h2>
   <p id = "output"> </p>
   <button onclick = "takeInput()"> Show Prompt box </button>
</body>
   <script>
      let message = "Enter your name";
      // function to take input using the prompt box
      function takeInput() {

         // showing the prompt with the message parameter
         let returnValue = prompt(message, "Shubham");
         let output = document.getElementById("output");
         if (returnValue) {
            output.innerHTML += "Your good name is " + returnValue;
         } else {
            output.innerHTML +=
            "You pressed the cancel button, or you entered the null value";
         }
      }
   </script>
</html>

Wir haben uns in diesem Tutorial alle drei verschiedenen Popups anhand von Beispielen angesehen. Wenn wir nur eine Nachricht anzeigen müssen, können wir ein Benachrichtigungsfeld verwenden. Wenn wir nur eine Benutzerbestätigung benötigen, sollten wir ein Bestätigungsfeld verwenden. Wenn wir einen Wert eingeben oder einen Wert in einem Popup-Fenster bestätigen müssen, sollten wir ein Eingabeaufforderungsfeld verwenden.

Das obige ist der detaillierte Inhalt vonPopup-Meldungen mithilfe von Ereignissen interpretieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript 对象事件 alert prompt

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich eine HTML-Liste aus einem JavaScript-Array?Nächster Artikel：Wie erstelle ich eine HTML-Liste aus einem JavaScript-Array?

In Verbindung stehende Artikel

Mehr sehen