メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

jQueryのセレクターでのinput/select/radioなどの入力要素の値取得コード例

いきなり第2回目にしてサンプルが長いですが
今回はコピペして単一のhtmlで動くようになっています。
jQueryライブラリのロードはCDNから取得しているのでネット環境は必須です。
気になる方はjQueryのモジュールを落としてきて111行目を書き換えて下さいね。

さて今回はjQueryセレクタのうち入力系要素の値を取得するコードです。
その中でも代表的な取得例を紹介します。

初期表示時に最初の入力要素のフォーカスをあてる

シンプルに書くと

$('input, textarea, select').eq(0).focus();

です。
eq(0) で取得した入力要素達のなかから最初のものを取り出して、focus()を呼びます。

ただstyle="display:none;"disabledreadonlyを除きたい場合はちょっと複雑ですが

$('input:enabled:visible:not([readonly]), textarea:enabled:visible:not([readonly]), select:enabled:visible').eq(0).focus();

となります。

なお、最初の入力要素が<input type="text">jQuery UIのdatepickerなどがあたってると
いきなりカレンダーが出てきてびっくりしますが、それを含めるかは各システムの好みでしょうね。