はじめに

ダイアログには様々な種類があります。

通常のダイアログ（alert）と、YesかNoかを選択させるダイアログ（confirm）と、入力を受け付けるダイアログ（prompt）などがあります。

本記事では、入力を受け付けるダイアログ（prompt）に関して記載します。

入力ダイアログ

入力ダイアログを表示する方法は以下です。

window.prompt("入力ダイアログ");

以下が、サンプルボタンです。

押下する事で、入力ダイアログが表示されます。

入力ダイアログテスト

上記のサンプルボタンのソースコードは以下です。

<button type="button" onclick="promptDialog()">入力ダイアログテスト</button>

<script>
function promptDialog() {
    window.prompt("入力ダイアログ");
}
</script>

入力ダイアログに初期値を設定

入力ダイアログの初期値を設定する方法は以下です。

window.prompt("入力ダイアログ", "初期値");

以下が、サンプルボタンです。

押下する事で、入力ダイアログが表示されます。

入力ダイアログ初期値テスト

上記のサンプルボタンのソースコードは以下です。

<button type="button" onclick="promptDefDialog()">入力ダイアログ初期値テスト</button>

<script>
function promptDefDialog() {
    window.prompt("入力ダイアログ", "初期値");
}
</script>

入力ダイアログの入力結果取得

入力ダイアログの入力結果を取得する方法は以下です。

const result = window.prompt("入力ダイアログ");

以下が、サンプルボタンです。

押下する事で、入力ダイアログが表示されます。

入力ダイアログ結果確認テスト

上記のサンプルボタンのソースコードは以下です。

<button type="button" onclick="promptResultDialog()">入力ダイアログ結果確認テスト</button>

<script>
function promptResultDialog() {
    const result = window.prompt("入力ダイアログ");
    window.alert(result);
}
</script>