JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのprompt()メソッドでプロンプトダイアログを表示する方法

プロンプトダイアログボックスは、テキスト入力欄をポップアップ表示してユーザーから入力を受け取りたい場合に非常に便利な機能です。これにより、Webページ上でユーザーと対話することが可能になります。ユーザーは表示された入力フィールドに値を入力し、「OK」ボタンをクリックするだけで操作を完了できます。

prompt()メソッドの基本

このダイアログボックスは、prompt()メソッドを呼び出すことで表示されます。prompt()メソッドは、次の2つの引数を受け取ります。

  • 第1引数： テキストボックスに表示したいラベル（メッセージ）
  • 第2引数： テキストボックスにあらかじめ表示しておくデフォルトの文字列

また、ダイアログには「OK」と「キャンセル」の2つのボタンが用意されており、押されたボタンによって戻り値が変わります。

  • 「OK」をクリックした場合： window.prompt()メソッドは、テキストボックスに入力された値を文字列として返します。
  • 「キャンセル」をクリックした場合： nullが返されます。

実装サンプルコード

以下のコードを実行すると、JavaScriptでプロンプトダイアログを実装する方法を実際に確認できます。

<html>
   <head>
      <script>
         <!--
            function getValue(){
               var retVal = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + retVal);
            }
         //-->
      </script>
   </head>
   <body>
      <p>Click the following button to see the result: </p>
      <form>
         <input type="button" value="Click Me" onclick="getValue();" />
      </form>
   </body>
</html>

このサンプルでは、ボタンをクリックするとgetValue()関数が呼び出され、名前の入力を求めるプロンプトダイアログが表示されます。入力された値は変数retValに格納され、画面に出力されます。

補足ポイント

なお、prompt()によるダイアログは手軽な一方で、デザインのカスタマイズができない、ページ読み込み中に呼び出すとブラウザによってはブロックされるなどの制限があります。より柔軟なUIが必要な場合は、HTMLとCSSで独自のモーダルダイアログを作成する方法も検討するとよいでしょう。

  1. JavaScriptのprompt()メソッドとは？使い方とサンプルコードをわかりやすく解説

    prompt()メソッドによるダイアログボックスは、テキスト入力欄をポップアップ表示してユーザーから入力を受け取りたい場合に非常に便利な機能です。これにより、Webページ上でユーザーとの対話的なやり取りが可能になります。ユーザーは表示された入力欄に文字を入力し、「OK」ボタンをクリックすることで値を送信できます。 このダイアログボックスは、JavaScriptのprompt()メソッドを呼び出すことで表示されます。戻り値としてユーザーが入力した文字列が返され、キャンセルボタンが押された場合はnullが返される点がポイントです。 サンプルコード 以下は、JavaScriptでプロンプトダイアログ

  2. Tkinterでプロンプトダイアログボックスを作成する方法

    ダイアログボックスは、ユーザーに特定の操作を促したり、重要な情報を伝えたりするための便利なUI要素です。私たちは日常的にさまざまなアプリケーションでダイアログボックスと接しており、その使い勝手には馴染みがあるでしょう。Tkinterアプリケーションでは、メッセージ表示、ユーザー対話型ダイアログ、単一値の入力ダイアログ、ファイル選択など、目的に応じた多彩なダイアログボックスを作成できます。これらを実現するために、Tkinterにはmessagebox、simpledialog、filedialog、colorchooserといった組み込みモジュールが用意されています。実装例ここでは、ユーザーに選