https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/character-input-dialog-for-users-on-browser-with-javascript/
https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/character-input-dialog-for-users-on-browser-with-javascript/

JavaScriptでブラウザ上でユーザー向けに文字入力ダイアログを表示させることができるprompt()メソッドの使い方

prompt()メソッドの使い方

JavaScriptでブラウザ上で文字ダイアログを表示させるにはprompt()メソッドを使います。

「OK」ボタンを押すと、「入力された文字列」が返り、「×」ボタンを押すとnullが返されます。

実際の開発では、この真偽値判定によって次に行う処理を振り分けることになります。

メソッド

メソッド意味返り値
prompt(メッセージの内容, テキスト入力欄に表示される初期値)文字入力プロンプトを表示文字列かnull
prompt()メソッド

サンプルコード

サンプルコードとして、ボタンを押すと、文字入力ダイアログを表示し、ユーザーが文字入力をした場合、その値を無害化してブラウザ上に出力するコードを紹介します。

Output
Pug
button#button.mb-4 Button
 div#targetText
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const targetText = document.getElementById('targetText');

// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.getElementById('button').addEventListener('click', onClickAction);

/** ボタンをクリックと関数を実行 */
function onClickAction() {
	//文字入力プロンプトを表示
	const pushPrompt = window.prompt('何か文字を入力してみてください。','デフォルトの文字です。');
	targetText.textContent = pushPrompt;
}
インストラクター
コメント

コメントを残す