So verwenden Sie Javascript, um das Eingabefeld aufzurufen

In der Webentwicklung gehören Popup-Eingabefelder zu den sehr häufigen Anforderungen. In JavaScript kann das Popup-Eingabefeld mithilfe der integrierten Eingabeaufforderungsmethode des Fensterobjekts implementiert werden. Die

prompt()-Methode ist eine der integrierten Methoden des JavaScript-Fensterobjekts, die zum Öffnen eines Dialogfelds mit einem Eingabefeld im Browser verwendet wird. Diese Methode kann zwei Parameter empfangen: Der erste Parameter ist eine Eingabeaufforderungszeichenfolge, mit der der Benutzer zur Eingabe von Informationen aufgefordert wird. Der zweite Parameter ist ein optionaler Standardwert, mit dem ein Standardwert im Eingabefeld angezeigt wird.

Das Folgende ist ein einfaches Beispiel für die Verwendung der prompt()-Methode zum Öffnen eines Eingabefelds:

var input = prompt("请输入姓名", "张三");

Der obige Code öffnet ein Dialogfeld mit einem Eingabefeld auf der Seite, in dem der Standardwert des Eingabefelds angezeigt wird ist „Zhang San“ und das Eingabeaufforderungszeichen Die Zeichenfolge lautet „Bitte geben Sie Ihren Namen ein“.

Wenn der Benutzer Informationen in das Eingabefeld eingibt und im Dialogfeld auf die Schaltfläche „OK“ klickt, wird das Popup-Fenster geschlossen und der vom Benutzer eingegebene Wert wird als Rückgabewert der Methode verwendet. Wenn der Benutzer im Dialogfeld auf die Schaltfläche „Abbrechen“ klickt, gibt die Methode null zurück.

if (input == null) {
  alert("你取消了输入");
} else {
  alert("你输入的是：" + input);
}

Nachdem das Eingabefeld geschlossen wurde, öffnet der obige Code basierend auf den Vorgängen des Benutzers verschiedene Eingabeaufforderungsfelder.

Es ist zu beachten, dass die Methode prompt() nur für einfache Benutzereingaben verwendet werden kann. In der tatsächlichen Webentwicklung müssen wir jedoch normalerweise flexiblere Eingabefelder verwenden, um mehr Geschäftsanforderungen zu unterstützen. Zu diesem Zeitpunkt müssen wir einige JavaScript-Bibliotheken oder Frameworks verwenden, um diese Funktionen zu implementieren.

Mit der Dialogkomponente in der jQuery-Klassenbibliothek können wir beispielsweise sehr bequem verschiedene Arten von Dialogfeldern öffnen und auch benutzerdefinierte Skins und Animationseffekte unterstützen.

Das Folgende ist ein Beispielcode für die Implementierung eines Eingabefelds basierend auf der Dialogkomponente von jQuery:

$("#inputDialog").dialog({
  autoOpen: false,      // 是否自动弹出对话框
  resizable: false,     // 是否可缩放
  title: "请输入姓名",  // 标题
  modal: true,          // 是否模态对话框
  buttons: {            // 按钮
    确定: function() {
      var input = $("#inputText").val();
      $(this).dialog("close");
      alert("你输入的是：" + input);
    },
    取消: function() {
      $(this).dialog("close");
    }
  }
});

$("#showInputDialog").click(function() {
  $("#inputDialog").dialog("open");
});

Im obigen Code wählen wir zunächst das Element aus, in dem sich das Eingabefeld befindet, über den jQuery-Selektor und rufen die Methode dialog() auf um ein Dialogfeld zu initialisieren. Unter diesen gibt der Parameter autoOpen an, ob das Dialogfeld automatisch angezeigt wird, die Größenänderung gibt an, ob das Dialogfeld skalierbar ist, modal gibt an, ob es sich um ein modales Dialogfeld handelt, und die Schaltflächen geben die Schaltflächen im Dialogfeld an.

Als nächstes fügen wir der Seite eine Schaltfläche hinzu und lösen durch das Klickereignis das Popup des Dialogfelds aus.

Wenn der Benutzer zu diesem Zeitpunkt im Dialogfeld auf die Schaltfläche „OK“ klickt, können wir den Wert im Eingabefeld über die val()-Methode abrufen und ein Eingabeaufforderungsfeld öffnen, um den vom Benutzer eingegebenen Inhalt anzuzeigen .

Durch den obigen Code können wir das Eingabefeld einfach öffnen. Im Vergleich zur prompt()-Methode ist diese Methode flexibler und kann verschiedene Geschäftsanforderungen besser erfüllen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Javascript, um das Eingabefeld aufzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!