JavaScript | フォーム内の値をリアルタイムで取得する方法
JavaScriptを使ってリアルタイムでフォーム内に入力されているテキストを取得・表示する方法のサンプルコードです。
update()関数を作成してリアルタイムでフォーム内容を取得する方法と、テキストフォームに入力があった場合にフォーム内容を取得する方法の2パターンを紹介しています。
随時更新でフォーム内のテキストを取得・表示
update()関数を作成して随時更新させてリアルタイムでフォーム内に入力されているテキストを取得・表示する動作サンプルです。
フォーム入力を取得するだけの実装であれば、update()関数を作る必要はありませんが他のコンテンツ部分でも利用している時に使えるかも知れません。
リアルタイム表示されている事が確認できます。
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();キーの入力イベントでフォーム内のテキストを取得・表示
テキストフォームにキーを入力（いずれかのキーを離した時）に発火するイベントを実装して、リアルタイムにフォーム内のテキストを取得します。
こちらの方が、上記した常に動いているupdate()関数より現実的です。
<p id="output"></p>
<p><input type="text" id="text_form" value=""></p>addEventListener()に「keyup」を指定して、要素上でいずれかのキーが離された時をトリガーにしたイベントを実装します。
let text_form = document.querySelector('#text_form');
let output = document.querySelector('#output');
text_form.addEventListener('keyup', function () {
output.innerHTML = text_form.value;
});