ブラウザでポップアップするテキスト入力欄を作る

最終更新日：2023-05-26
公開日：2020-05-12

ブラウザで簡単なテキスト入力を受け付ける方法について解説します。

この記事のポイント

手軽にテキスト入力欄を実装する
入力された値を受け取る

ポップアップでシンプルなテキスト入力フォームを表示する

閲覧者に簡単なテキスト入力フォームを表示したいとき、promptメソッドを使うとポップアップ形式で表示することができます。

promptメソッドは入力内容を返り値にするため、以下のように変数で受け取って処理することができます。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JS Test</title>
  <script>
    window.addEventListener('load', (event) => {

      let value = prompt("名前を入力してください。");

      if( value ) {
        console.log('Hello,' + value);
      }
    });
  </script>
  <style>
    body {
      background-color: #f7f7f7;
    }
  </style>
</head>
<body>
<h1>JS Test</h1>
</body>
</html>

例えば、以下のように「Kohei」と入力したら変数valueで返り値を受け取り、console.logメソッドで「Hello, Kohei」と出力するようなことができます。

promptメソッドはデフォルト値を第2パラメータに指定することもできます。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JS Test</title>
  <script>
    window.addEventListener('load', (event) => {

      let value = prompt("名前を入力してください。", "例）Taro");

      if( value ) {
        console.log('Hello,' + value);
      }
    });
  </script>
  <style>
    body {
      background-color: #f7f7f7;
    }
  </style>
</head>
<body>
<h1>JS Test</h1>
</body>
</html>

このコードを実行すると以下のようにデフォルト値が表示されます。

記事一覧

ポップアップでシンプルなテキスト入力フォームを表示する

JavaScript コード例

JavaScript コード例

関連記事