JavaScriptでinput属性内のテキストボックスの情報を取得する方法

JavaScriptでフォーム要素に入力したテキスト情報を取得したい

input要素のtype属性にtextやtextareaを設定すると、テキスト入力欄を表示することができます。

テキスト入力欄にはユーザーが自由に文字を入力することができます。

値をJavaScritで取得するには、要素を参照して、valueプロパティーにアクセスする必要があります。

valueプロパティは文字列型になります。

プロパティ

プロパティ意味
インプット要素.value入力欄の文字列を取得文字列
input要素のプロパティ

サンプルコード

入力枠を用意します。その入力枠に記入された要素が、フォームの下にそのまま出力されるサンプルコードを紹介します。

input type=”text”

Output
Pug
#targetArea.text-center
		form.form-group
			input#targetText.form-control(type="text" value="")
	#formResult 
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetResult = document.getElementById( 'formResult' );

targetText.addEventListener( 'keyup', onKeyUp );

function onKeyUp() {
	const targetTextValue = targetText.value;
	targetResult.textContent = targetTextValue;
}

<textarea>タグ

Output
Pug
#targetArea2.text-center
		form.form-group
			textarea#targetText2.form-control(type="text" rows="5" cols="40" value="")
	#formResult2
JavaScript
const targetText2 = document.getElementById( 'targetText2' );
const targetResult2 = document.getElementById( 'formResult2' );

targetText2.addEventListener( 'keyup', onKeyUp2 );

function onKeyUp2() {
	const targetTextValue2 = targetText2.value;
	targetResult2.textContent = targetTextValue2;
}

input type=”tel”

input type=”tel”を指定することで、スマートフォンでの入力時に数値だけのキーボードが表示されるようになります。

Output
Pug
#targetArea3.text-center
		form.form-group
			input#targetText3.form-control(type="tel" value="")
	#formResult3
JavaScript
const targetText3 = document.getElementById( 'targetText3' );
const targetResult3 = document.getElementById( 'formResult3' );

targetText3.addEventListener( 'keyup', onKeyUp3 );

function onKeyUp3() {
	const targetTextValue3 = targetText3.value;
	targetResult3.textContent = targetTextValue3;
}

input type=”email”

input type=”email”にした場合、スマートフォンでも入力時にメールアドレスの入力に適した英数字のキーボードが自動で表示されるようになります。

Output
Pug
#targetArea4.text-center
		form.form-group
			input#targetText4.form-control(type="email" value="")
	#formResult4
JavaScript
const targetText4 = document.getElementById( 'targetText4' );
const targetResult4 = document.getElementById( 'formResult4' );
targetText4.addEventListener( 'keyup', onKeyUp4 );

function onKeyUp4() {
	const targetTextValue4 = targetText4.value;
	targetResult4.textContent = targetTextValue4;
}
インストラクター