JavaScript ist eine sehr leistungsfähige Skriptsprache, mit der interaktive Eingabeaufforderungsfelder auf Webseiten erstellt werden können. Ein Tooltip kann dem Benutzer Informationen wie eine Warnung oder Fehlermeldung anzeigen oder einfach eine Bestätigung vom Benutzer anfordern. In diesem Artikel wird erläutert, wie Sie mit JavaScript verschiedene Arten von Tooltips erstellen und wie Sie das Erscheinungsbild und Verhalten dieser Tooltips anpassen.

Erstellen Sie einen einfachen JavaScript-Tooltip.

Zuerst erstellen wir einen einfachen JavaScript-Tooltip, der eine Meldung und eine Schaltfläche „OK“ anzeigt. Das Folgende ist der Code dieser Eingabeaufforderungsbox:

alert("Hello, World!");

Nach dem Login kopieren

In diesem Code wird die Funktion „alert()“ verwendet, um die Eingabeaufforderungsbox zu erstellen. Als Parameter wird eine Zeichenfolge akzeptiert, bei der es sich um die Meldung handelt, die im Eingabeaufforderungsfeld angezeigt werden soll. In diesem Beispiel zeigen wir im Tooltip eine einfache Meldung „Hallo Welt!“ an.

Sie können diesen Code in Ihr HTML-Dokument kopieren und in die Webseite laden. Wenn die Webseite geladen wird, wird der Tooltip automatisch eingeblendet, um dem Benutzer eine einfache Nachricht anzuzeigen. Der Benutzer kann im Eingabeaufforderungsfeld auf die Schaltfläche „OK“ klicken, um das Eingabeaufforderungsfeld zu schließen und zur Webseite zurückzukehren.

Erstellen Sie eine Eingabeaufforderung mit Schaltflächen zum Bestätigen und Abbrechen.

Sie können eine JavaScript-Eingabeaufforderung verwenden, um eine Bestätigungsaktion vom Benutzer anzufordern. Hier ist ein Beispiel, das zeigt, wie man ein Eingabeaufforderungsfeld mit Schaltflächen zum Bestätigen und Abbrechen erstellt:

var result = confirm("Are you sure you want to delete this file?");

if (result) {
  // 用户点击了确认按钮
} else {
  // 用户点击了取消按钮
}

Nach dem Login kopieren

In diesem Beispiel verwenden wir die Funktion „firmify()“, um das Eingabeaufforderungsfeld zu erstellen. Es akzeptiert eine Zeichenfolge als Parameter. Dabei handelt es sich um die Informationen, die Sie dem Benutzer bestätigen müssen. In diesem Beispiel zeigen wir dem Benutzer eine Frage, ob er die Datei wirklich löschen möchte.

Wenn der Benutzer im Eingabeaufforderungsfeld auf die Schaltfläche „Bestätigen“ klickt, gibt die Funktion „confirm()“ den booleschen Wert „true“ zurück. Wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt, gibt die Funktion „confirm()“ „false“ zurück. Basierend auf dem Rückgabewert können wir im Code eine entsprechende Logik ausführen, um auf die Operation des Benutzers zu reagieren.

Erstellen Sie einen Tooltip mit einem Eingabefeld

JavaScript-Tooltips können nicht nur Informationen anzeigen und eine Benutzerbestätigung anfordern, sondern auch als Eingabefelder verwendet werden. Hier ist ein Beispiel, das zeigt, wie man eine Eingabeaufforderungsbox mit einem Eingabefeld erstellt:

var name = prompt("Please enter your name:", "");

if (name != null) {
  // 用户输入了一个名字
} else {
  // 用户点击了取消按钮
}

Nach dem Login kopieren

In diesem Beispiel verwenden wir die Funktion prompt(), um eine Eingabeaufforderungsbox zu erstellen. Es akzeptiert zwei Parameter: eine Zeichenfolge, die dem Benutzer eine Nachricht mit der Bitte um Eingabeinformationen anzeigt, und einen optionalen Standardwert. In diesem Beispiel zeigen wir dem Benutzer eine Nachricht, in der er zur Eingabe seines Namens aufgefordert wird.

Wenn der Benutzer im Eingabeaufforderungsfeld auf die Schaltfläche „OK“ klickt, gibt die Funktion prompt() die vom Benutzer eingegebene Zeichenfolge zurück. Wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt, gibt die Funktion prompt() null zurück. Basierend auf dem Rückgabewert können wir im Code eine entsprechende Logik ausführen, um auf die Vorgänge des Benutzers zu reagieren.

So passen Sie das Erscheinungsbild und Verhalten von Tooltips an

Während JavaScript-Tooltips eine einfache und bequeme Möglichkeit zum Anzeigen und Anfordern von Informationen bieten, sind ihr Erscheinungsbild und Verhalten begrenzt. Wenn Sie mehr Kontrolle benötigen, können Sie mit JavaScript einen benutzerdefinierten Tooltip erstellen. Hier ist ein Beispiel, das zeigt, wie ein benutzerdefiniertes Eingabeaufforderungsfeld erstellt wird:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom Dialog Box</title>
  <style>
    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      z-index: 99999;
    }
    #dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      background-color: #fff;
      border: 1px solid #000;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      z-index: 999999;
    }
    #dialog h2 {
      margin-top: 0;
    }
    #dialog p {
      margin-bottom: 20px;
    }
    #dialog input[type="text"] {
      display: block;
      width: 100%;
      margin-bottom: 20px;
    }
    #dialog button {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <button onclick="showDialog()">Show Dialog</button>
  <div id="overlay">
    <div id="dialog">
      <h2>Custom Dialog Box</h2>
      <p>Please enter your name:</p>
      <input type="text" id="name">
      <button onclick="hideDialog()">OK</button>
      <button onclick="cancelDialog()">Cancel</button>
    </div>
  </div>
  <script>
    function showDialog() {
      document.getElementById("overlay").style.display = "block";
    }
    function hideDialog() {
      var name = document.getElementById("name").value;
      alert("Hello, " + name + "!");
      document.getElementById("overlay").style.display = "none";
    }
    function cancelDialog() {
      document.getElementById("overlay").style.display = "none";
    }
  </script>
</body>
</html>

Nach dem Login kopieren

In diesem Beispiel haben wir ein benutzerdefiniertes Dialogfeld erstellt, das einen Titel, eine Nachricht, ein Eingabefeld und zwei Schaltflächen (OK und Abbrechen) enthält. Wir verwenden CSS, um das Erscheinungsbild des Dialogfelds zu definieren, und JavaScript, um das Verhalten des Dialogfelds zu definieren. Wenn der Benutzer auf die Schaltfläche „Dialog anzeigen“ klickt, zeigen wir dem Benutzer dieses benutzerdefinierte Dialogfeld an. Wenn der Benutzer auf die Schaltfläche „OK“ klickt, erhalten wir den Text im Eingabefeld und zeigen mithilfe der Funktion „alert()“ eine Nachricht an. Wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt, wird das Dialogfeld ausgeblendet, ohne dass weitere Aktionen ausgeführt werden.

Dieses Beispiel ist nur der Anfang der Anpassung des Eingabeaufforderungsfelds. Sie können das Erscheinungsbild und Verhalten des Dialogfelds selbst an Ihre Bedürfnisse anpassen. Mithilfe von JavaScript und CSS können Sie sehr komplexe benutzerdefinierte Tooltips erstellen, die Ihren spezifischen Anforderungen entsprechen.

Zusammenfassung

JavaScript bietet verschiedene Möglichkeiten zum Erstellen von Eingabeaufforderungsfeldern, einschließlich der Funktionen „alert()“, „confirm()“ und „prompt()“. Mit diesen Funktionen können Sie dem Benutzer Informationen präsentieren, eine Bestätigungsaktion anfordern oder Eingaben einholen. Wenn Sie mehr Kontrolle benötigen, können Sie JavaScript und CSS verwenden, um das Erscheinungsbild und Verhalten des Tooltips anzupassen. Unabhängig davon, für welche Methode Sie sich entscheiden, bietet JavaScript eine sehr leistungsstarke und bequeme Möglichkeit, interaktive Tooltips zu erstellen.

Das obige ist der detaillierte Inhalt vonSo richten Sie das Javascript-Eingabeaufforderungsfeld ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!