JavaScriptを使用して入力ボックスをポップアップ表示する方法

Web 開発では、ポップアップ入力ボックスは非常に一般的な要件の 1 つです。 JavaScript では、ウィンドウ オブジェクトの組み込みプロンプト メソッドを使用してポップアップ入力ボックスを実装できます。

prompt() メソッドは、JavaScript ウィンドウ オブジェクトの組み込みメソッドの 1 つで、ブラウザーに入力ボックスのあるダイアログ ボックスをポップアップするために使用されます。このメソッドは 2 つのパラメーターを受け取ることができ、最初のパラメーターはユーザーに情報の入力を求めるプロンプト文字列で、2 番目のパラメーターはオプションのデフォルト値で、入力ボックスにデフォルト値を表示するために使用されます。

以下は、prompt() メソッドを使用して入力ボックスをポップアップする基本的な例です。

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

上記のコードは、ページ上に入力ボックスを含むダイアログ ボックスをポップアップ表示します。ここで、入力ボックスのデフォルト値は「Zhang San」、プロンプト文字列は「名前を入力してください」です。

ユーザーが入力ボックスに情報を入力し、ダイアログ ボックスの「OK」ボタンをクリックすると、ポップアップ ボックスが閉じ、ユーザーが入力した値がダイアログ ボックスの戻り値として使用されます。方法。ユーザーがダイアログ ボックスの [キャンセル] ボタンをクリックすると、メソッドは null を返します。

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

入力ボックスを閉じた後、上記のコードはユーザーの操作に応じてさまざまなプロンプト ボックスをポップアップ表示します。

prompt() メソッドは単純なユーザー入力にのみ使用できることに注意してください。実際の Web 開発では、通常、より多くのビジネス ニーズをサポートするために、より柔軟な入力ボックスを使用する必要があります。現時点では、これらの機能を実装するには、いくつかの JavaScript ライブラリまたはフレームワークを使用する必要があります。

たとえば、jQuery クラス ライブラリのダイアログ コンポーネントを使用すると、さまざまなタイプのダイアログ ボックスを非常に簡単にポップアップでき、カスタム スキンやアニメーション効果もサポートします。

以下は、入力ボックスを実装するための 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");
});

上記のコードでは、まず jQuery を通じて入力ボックスが配置されている要素を選択します。 selector を選択し、dialog() メソッドを呼び出してダイアログ ボックスを初期化します。このうち、autoOpen パラメータはダイアログ ボックスが自動的にポップアップするかどうかを示し、resizable はダイアログ ボックスがスケーラブルかどうかを示し、modal はモーダル ダイアログ ボックスかどうかを示し、buttons はダイアログ ボックス内のボタンを示します。

次に、ページにボタンを追加し、クリック イベントを通じてダイアログ ボックスのポップアップをトリガーします。

この時点で、ユーザーがダイアログ ボックスの [OK] ボタンをクリックすると、val() メソッドを通じて入力ボックスの値を取得し、内容を表示するプロンプト ボックスをポップアップ表示できます。ユーザーが入力したもの。

上記のコードにより、入力ボックスを簡単にポップアップすることができます。prompt() メソッドと比較して、このメソッドはより柔軟であり、さまざまなビジネス ニーズをよりよく満たすことができます。

以上がJavaScriptを使用して入力ボックスをポップアップ表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。