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

jQuery
このエントリーをはてなブックマークに追加
PR

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);

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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)