jQueryでinputやtextareaに入力された値を取得する

jQueryを使ってフォームなどに有るinputやtextareaの中身を取得する方法です。例えば、入力された値を即座に取得してリアルタイムに絞り込み機能を実装したりコメント欄等のエリアでcookieやlocalstorageに値を記憶させて次回から自動で名前等の値を挿入するなどに使える。

jQueryでinputの値を取得する

$("#fome-x input[name=name]").val();

これでinputの中身の値を取得する事が出来ます、inputの場合はpタグやdivタグでのテキストにはあたらないのでval()を使って取得します。

フォーカス外れたタイミングで取得するケース

$("#fome-x input[name=name]").on("blur",function(){
  var fome_x_name = $(this).val();
  //以下何らかの処理等
  //・・・
  //・・・
  //・・・
});

blurはフォーカスが変更された時に実行されます。 inputの入力が終わった時にボタンを押したり別のinputへフォーカスが移ったりしますのでそのタイミングで値を取得するようにすれば擬似的に入力の確定とみなせる。

リアルタイムに取得するケース

$("#fome-x input[name=name]").on("keyup",function(){
  var fome_x_name = $(this).val();
  //以下何らかの処理等
  //・・・
  //・・・
  //・・・
});

トリガーにkeyupを使うことで文字の入力が終わった時点で取得します、このときの値を使ってリアルタイムな処理を行うことが出来る。リアルタイムな絞り込み検索の実装や入力された文字を何かリアルタイムに出力する場合など。

値を設定するケース

//そのまま値を入れる場合
$("#fome-x input[name=name]").val("値を挿入する");


//値を変数に入れてからvalに入れる場合
var value = "値を挿入する";
$("#fome-x input[name=name]").val(value);

上の例では値の取得のみを行ってきたが、逆に値を入れることも可能です。コメントの名前などブラウザに保存した情報を取り出して自動的に値を入れておくことも出来る。

短縮URL: