JavaScript | フォーム内の値をリアルタイムで取得する方法

JavaScript,JavaScript フォーム

フォーム内の値をリアルタイムで取得する方法

JavaScriptを使ってリアルタイムでフォーム内に入力されているテキストを取得・表示する方法のサンプルコードです。

リアルタイムでフォーム内のテキストを取得・表示

リアルタイムでフォーム内に入力されているテキストを取得・表示する動作サンプルです。

入力すると、リアルタイム表示されている事が確認できます。

See the Pen JavaScript Get form text in real time by yochans (@yochans) on CodePen.

動作サンプルに利用しているサンプルコードです。

HTMLにはテキストフォームと出力用の要素を用意しています。

<p id="output"></p>
<p><input type="text" id="text_form" value=""></p>

JavaScriptのリアルタイム処理にはrequestAnimationFrame()を利用しています。

requestAnimationFrame()はおよそFPS60で処理・描画を実行しますが、フォーム内のテキストを取得・処理するだけなら早すぎますので、「timestamp」として処理回数を用意して処理内で10分の1で実行するようにしています。

let text_form = document.getElementById('text_form');
let output = document.getElementById('output');

timestamp = 0;

function update(){
	
	timestamp++;
	window.requestAnimationFrame(update);
	
	if (timestamp % 10 == 0 ){
		output.innerHTML = text_form.value;
	}
	
}

update();

フォームの値の取得は対象のフォーム要素から「value」で取得可能です。
innerHTMLで出力用の要素に表示しています。

output.innerHTML = text_form.value;

requestAnimationFrame()による繰り返し処理の部分です。

requestAnimationFrame()で自身を含む関数を指定、一度だけ外から呼び出します。

function update(){
	window.requestAnimationFrame(update);
	//処理内容
};

update();

「timestamp」という変数を作成して値が10で割り切れる場合のみ処理を実行するようにし、処理を実行するペースを落としています。
用途と負荷を考えた場合、もっとペースを落としても良いかもしれません。
10を100にすれば100分の1になります。

timestamp = 0;

function update(){
	timestamp++;
	window.requestAnimationFrame(update);

	if (timestamp % 10 == 0 ){
		//処理内容
	}
};

update();