ywork2020.com

Title

入力ダイアログを開く

目次 (INDEX)

window とは

ここで説明する window とは次の語句からなる javascript のグローバル変数であり、Window オブジェクトを参照します。
window
読み: ウィンドウ
意味: 窓

prompt とは

ここで説明する prompt とは次の語句からなる javascript のメソッドです。
prompt
読み: プロンプト
意味: IT では 「入力してください」という意味

目次に戻る

Window.prompt メソッドの概要

このメソッドは、ブラウザの入力ダイアログを開きます。

Window オブジェクトは window 変数から参照します。 なお、window はグローバル変数であり、コードには window を省略してメソッドから記述することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var strResult = window.prompt(strText [, strValue]);
  • strText: ダイアログに表示するメッセージです。
  • strValue: 入力欄に既定で入力されるテキストです。省略可能です。
  • strResult: 入力されたテキストです。キャンセルが選択されたら null となります。

目次に戻る

サンプルコードと実行結果

ここでは、プロンプトダイアログを使った一通りの処理を見てみましょう。

サンプルコード: HTML
<body>
	<p><button onclick="funOpenPrompt(this.innerText)"> プロンプト </button></p>
	<p><output id="idOutput"> 結果表示枠 </output></p>
	<script>...</script>
</body>
  • 02: button (ボタン要素です。これをクリックすると funOpenPrompt() 関数を実行します。)
  • 03: output (出力要素です。プロンプトダイアログからの戻り値を表示するためにあります。)
サンプルコード: script
<script>
	let elmOutput = document.getElementById("idOutput");
	function funOpenPrompt(strReceive){
		let strResult;
		strResult = window.prompt(strReceive + ' が押されました。無意味な文字を入力して下さい', "テスト");
		if(strResult == null){
			elmOutput.innerText = 'キャンセルでした';
		}
		else{
			elmOutput.innerText = strResult + ' と入力されました';
		}
	}
</script>
  • 05: strResult = window.prompt(); (この部分がプロンプトダイアログを開きます。)
実行結果:

結果表示枠

目次に戻る