JavaScriptプロンプトボックスの設定方法

王林

リリース： 2023-05-27 10:18:07

オリジナル

663 人が閲覧しました

JavaScript は、Web ページに対話型のプロンプトボックスを作成するために使用できる非常に強力なスクリプト言語です。ツールチップは、警告やエラーメッセージなどの情報をユーザーに提示したり、単にユーザーに確認を要求したりできます。この記事では、JavaScript を使用してさまざまな種類のツールヒントを作成する方法を検討し、これらのツールヒントの外観と動作をカスタマイズする方法について説明します。

基本的な JavaScript ツールチップの作成

まず、メッセージと [OK] ボタンを表示する単純な JavaScript ツールチップを作成します。このプロンプトボックスのコードは次のとおりです。

alert("Hello, World!");

ログイン後にコピー

このコードでは、alert() 関数を使用してプロンプトボックスを作成します。プロンプトボックスに表示するメッセージである文字列をパラメータとして受け入れます。この例では、ツールチップに簡単なメッセージ「Hello, World!」を表示します。

このコードを HTML ドキュメントにコピーし、Web ページに読み込むことができます。 Web ページが読み込まれると、ツールヒントが自動的にポップアップし、ユーザーに簡単なメッセージが表示されます。ユーザーはプロンプトボックスの [OK] ボタンをクリックしてプロンプトボックスを閉じ、Web ページに戻ることができます。

確認ボタンとキャンセルボタンを備えたプロンプトボックスを作成する

JavaScript プロンプトボックスを使用して、ユーザーに確認アクションを要求できます。次に、確認ボタンとキャンセルボタンを持つプロンプトボックスを作成する方法を示す例を示します。

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

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

ログイン後にコピー

この例では、confirm() 関数を使用してプロンプトボックスを作成します。ユーザーに確認する必要がある情報である文字列をパラメータとして受け取ります。この例では、ファイルを削除してもよいかどうかを尋ねる質問をユーザーに表示します。

ユーザーがプロンプトボックスの確認ボタンをクリックすると、confirm() 関数はブール値 true を返します。ユーザーがキャンセルボタンをクリックすると、confirm() 関数は false を返します。戻り値に基づいて、コード内で対応するロジックを実行し、ユーザーの操作に応答できます。

入力ボックスを備えたプロンプトボックスを作成する

情報を表示してユーザーに確認を求めるだけでなく、JavaScript プロンプトボックスを入力ボックスとしても使用できます。以下に、入力ボックスを備えたプロンプトボックスを作成する方法を示す例を示します。

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

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

ログイン後にコピー

この例では、prompt() 関数を使用してプロンプトボックスを作成します。これは 2 つのパラメーターを受け入れます。入力情報を求めるユーザーにメッセージを表示するために使用される文字列と、オプションのデフォルト値です。この例では、ユーザーに名前の入力を求めるメッセージを表示します。

ユーザーがプロンプトボックスの [OK] ボタンをクリックすると、prompt() 関数はユーザーが入力した文字列を返します。ユーザーがキャンセルボタンをクリックすると、prompt() 関数は null を返します。戻り値に基づいて、コード内で対応するロジックを実行し、ユーザーの操作に応答できます。

ツールチップの外観と動作をカスタマイズする方法

JavaScript ツールチップは、情報を表示および要求するための簡単で便利な方法を提供しますが、その外観と動作には制限があります。さらに制御が必要な場合は、JavaScript を使用してカスタムツールチップを作成できます。以下は、カスタムプロンプトボックスの作成方法を示す例です:

<!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>

ログイン後にコピー

この例では、タイトル、メッセージ、入力ボックス、および 2 つのボタン ([OK] と [キャンセル]) を含むカスタムダイアログボックスを作成します。）。 CSS を使用してダイアログボックスの外観を定義し、JavaScript を使用してダイアログボックスの動作を定義します。ユーザーが「ダイアログの表示」ボタンをクリックすると、このカスタムダイアログボックスがユーザーに表示されます。ユーザーが [OK] ボタンをクリックすると、入力ボックス内のテキストを取得し、alert() 関数を使用してメッセージを表示します。ユーザーがキャンセルボタンをクリックすると、他のアクションは実行されずにダイアログボックスが非表示になります。

この例は、プロンプトボックスのカスタマイズの始まりにすぎません。ダイアログボックスの外観と動作は、ニーズに合わせて自分で変更できます。 JavaScript と CSS を使用すると、特定のニーズを満たす非常に複雑なカスタムツールチップを作成できます。

概要

JavaScript には、alert()、confirm()、prompt() 関数など、プロンプトボックスを作成するさまざまな方法が用意されています。これらの関数を使用して、ユーザーに情報を提示したり、確認アクションを要求したり、入力を取得したりできます。さらに制御が必要な場合は、JavaScript と CSS を使用してツールヒントの外観と動作をカスタマイズできます。どの方法を選択しても、JavaScript は対話型のツールチップを作成するための非常に強力で便利な方法を提供します。

以上がJavaScriptプロンプトボックスの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。