jQueryで色々なフォーム入力値をリアルタイム取得する
jQueryで色々なフォーム入力値をリアルタイム取得する
jQueryでフォームの入力地をリアルタイムで取得する方法を紹介します。
フォームのvalue値をリアルタイムで取得したい場合、必ずしも
フォームのパーツからフォーカスが外れた時やクリック時とは限りません。フォームの入力値が変更されたことを取得していきます。
jQueryのchangeイベントがかなり便利
今日まで知らなかったのですが、フォームのvalue値が変更されたことを知るにはchangeイベントがかなり便利なようです。
プルダウンが変更されたら
フォームのプルダウンが変更されたらvalue値がリアルタイムに変更されます。
ソースコード
$("#select1 select").change(function () {
var str = "";
str = $(this).val();
$("#select1 div").text(str);
}).change();
var str = "";
str = $(this).val();
$("#select1 div").text(str);
}).change();
実行例
テキストエリアのテキストが変更されたら
先ほどのchangeイベントを使ってテキストエリアでも同じようにvalue値がリアルタイムに変更されるかテストしてみます。
ソースコード
$("#textarea1 textarea").change(function () {
var str = "";
str = $(this).val();
$("#textarea1 div").text(str);
}).change();
var str = "";
str = $(this).val();
$("#textarea1 div").text(str);
}).change();
実行例
これは間違いではないのですがイマイチリアルタイムにvalue値を取得しているとは言いがたいです。（テキストエリアからフォーカスが外れたら実行されます）
そもそもchangeとはフォーカスが外れたら処理が実行されるので、フォームの入力値をリアルタイムに判定しているわけではありません。
リアルタイムにテキストエリアのvalue値を取得する
今回はこちらを参考にさせて頂きました。
つまり、先に入力したほうと、後から入力した方それぞれのvalueを比べているわけですね。
ソースコード
$("#textarea2 textarea").each(function(){
$(this).bind(‘keyup’, hoge(this));
});
function hoge(elm){
var v, old = elm.value;
return function(){
if(old != (v=elm.value)){
old = v;
str = $(this).val();
$("#textarea2 div").text(str);
}
}
}
$(this).bind(‘keyup’, hoge(this));
});
function hoge(elm){
var v, old = elm.value;
return function(){
if(old != (v=elm.value)){
old = v;
str = $(this).val();
$("#textarea2 div").text(str);
}
}
}