入力ダイアログ

広告

ここではユーザーに対して入力を行っていただくためのダイアログの表示方法を見ていきます。 

戻り値 = window.prompt("表示する文字列", "初期値の文字列")

引数で指定した文字列を表示し、引数で指定した初期値が入ったユーザーに入力を行って頂くためのダイアログを表示します。ダイアログには"OK"ボタンと"キャンセル"ボタンもあわせて表示されます。"window."は省略可能で単に"prompt("文字列", "初期文字列")のような記述が可能です。

"OK"ボタンが押された場合は戻り値に入力した文字列が、"キャンセル"ボタンが押された場合は戻り値に"null"が値として返ってきます。また、どちらかのボタンが押されるまではJavaScriptの処理は"prompt"を処理したところで止まります。

サンプルコード

一度試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>

<script type="text/javascript" src="./js/script3_1.js">
</script>

</head>
<body>

<p>
下記のボタンを押して下さい。
</p>

<form name="test">
<input type="button" value="移動先のURLを入力" onClick="kakunin()">
</form>

</body>
</html>

function kakunin(){
    ret = prompt("URLを入力", "http://www.google.co.jp/");
    if (ret != null){
        location.href = ret;
    }
}

上記をブラウザで見ると下記のように表示されます。

p3-1

画面にボタンが1つ表示されます。このボタンをクリックすると下記のように入力ダイアログが表示されます。

p3-2

ダイアログの「キャンセル」ボタンを押すとダイアログが閉じるだけですが、URLを入力ダイアログに入力し「OK」ボタンを押して下さい。(今回はデフォルトで設定されているURLをそのまま使用するため、単に「OK」ボタンを押しました)。

p3-3

入力ダイアログで指定したURLのWebページが表示されます。

( Written by Tatsuo Ikura )