JavaScript の確認: [はい] または [いいえ] を選択します。

この短い記事では、JavaScript を使用して確認ダイアログを表示する方法について説明します。確認ダイアログ ボックスを使用すると、ユーザー入力に基づいてアクションを実行できます。

JavaScript はインターネットの中核テクノロジーの 1 つです。これはほとんどの Web サイトで使用されており、プラグインを必要とせずにすべての最新の Web ブラウザーでサポートされています。ここ Envato Tuts では、日常の JavaScript 開発に役立つヒントやテクニックについて説明しています。

JavaScript 開発者は、多くの場合、「はい」または「いいえ」の質問の形式でユーザー入力を取得し、それに基づいて何らかのアクションを実行する必要があります。具体的には、一部のアクションは機密性が高く、元に戻すことができないため、ユーザーが誤ってアクションを実行しないように、ユーザーが実際にそのアクションを実行するつもりであることを警告または確認する必要があります。たとえば、データベースからエンティティを削除できる削除リンクがある場合、それを実際に削除するかどうかをユーザーに確認する必要があります。そのため、ユーザーが誤って削除リンクをクリックした場合でも、少なくともキャンセルする機会があります。

この記事では、JavaScript でユーザーのアクションを確認する 2 つの方法を説明します。confirm メソッドを使用する方法と、非表示の確認 div を使用する方法です。

confirmメソッドの構文

JavaScript では、window オブジェクトの confirm メソッドを使用してダイアログ ボックスを表示し、ユーザーが確認またはキャンセルするのを待つことができます。今日は、それがどのように機能するかを実際の例を使って説明します。

このセクションでは、window.confirm メソッドの構文を紹介します。

confirm メソッドの構文は次のとおりです:

リーリー

confirm メソッドは単一の文字列パラメーターを受け取り、ダイアログ ボックスに表示するメッセージを渡します。これはオプションのパラメータですが、賢明なメッセージを渡す必要があります。そうでない場合は、「はい」または「いいえ」のオプションを含む空のダイアログ ボックスが表示され、訪問者にとっては何の意味も持たない可能性があります。通常、メッセージは質問の形式をとり、ユーザーに 2 つの選択肢を提供します。

ダイアログ ボックスには、OK と Cancel という 2 つのボタンがあります。ユーザーが「OK」ボタンをクリックすると、confirm メソッドは true を返します。ユーザーが「Cancel」ボタンをクリックすると、confirm メソッドは false を返します。したがって、confirm メソッドの戻り値を通じてユーザーの選択を理解できます。 (ボタンに Yes や No など、別の内容を表示したい場合は、この記事の最後でその方法を説明します。)

window オブジェクトは常に暗黙的であるため、そのプロパティとメソッドは常にスコープ内にあることを意味するため、次のコード スニペットに示すように、confirm メソッドを呼び出すこともできます。

リーリー

確認ダイアログ ボックスはモーダルで同期的であることに注意してください。したがって、JavaScript コードの実行は、ダイアログ ボックスが表示されると停止し、ユーザーが [OK] または [キャンセル] ボタンをクリックしてダイアログ ボックスを閉じた後も続行されます。

これは、confirm メソッドの構文の概要です。次のセクションでは、実際の例を紹介します。

確認実際の方法例

このセクションでは、JavaScript で confirm メソッドを使用する方法を実際の例を通して説明します。

以下の例を見てください。

ユーザーが 「プロフィールを削除」をクリックしたとき ボタンをクリックすると、deleteProfile 関数が呼び出されます。 deleteProfile 関数では、ユーザーに確認ダイアログ ボックスを表示する確認メソッドを呼び出します。

最後に、ユーザーが確認ダイアログの OK ボタンをクリックすると、ユーザーは /deleteProfile.php ページにリダイレクトされ、削除操作が実行されます。 。一方、ユーザーが [キャンセル] ボタンをクリックした場合、何もアクションは実行されません。 JavaScript の実行は、ユーザーが選択を行って確認ダイアログを閉じるまで停止します。

これは、JavaScript でconfirm メソッドを使用して、はいまたはいいえの選択ダイアログをレンダリングする方法です。

隠し Div を使用して Yes または No を確認する

confirm メソッドを使用してユーザーの確認を取得することには、いくつかの欠点があります。 1 つは、確認ダイアログがアプリや Web サイトの UI の一部にならないことです。ブランドや配色は使用されません。また、たとえば、OK や Cancel の代わりに Yes または No と言いたい場合などもカスタマイズできません。最後に、確認ダイアログはモーダルであるため、これが表示されている限り、ユーザーはアプリ インターフェイスの他の部分を操作できません。

はいかいいえを確認するもう 1 つの方法は、ページ上の非表示の div を使用することです。次の例を見てください:

この例では、ID confirm を持つ非表示の確認 div があります。 div を表示するには、その hidden プロパティを true に設定するだけです。確認メッセージを表示したい場合は、hidden を true に設定し、再度 false に設定して非表示にします。

ご覧のとおり、Yes または No を確認するこの方法では、window.confirm メソッドよりも柔軟性とカスタマイズ性が高くなります。

＃＃＃結論は＃＃＃

今日は、JavaScript でユーザーの確認を取得する 2 つの方法について説明しました。まず、最も単純なメソッドである

window.confirm

メソッドを見てみましょう。ただし、これでは優れたユーザー エクスペリエンスは得られません。次に、非表示の div を使用してユーザーの確認を取得し、確認の外観と動作をより詳細に制御する方法を説明しました。

以上がJavaScript の確認: [はい] または [いいえ] を選択します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。