読者です 読者をやめる 読者になる 読者になる

まるでちょんまげハリウッド

ちょんはり師匠の生きざまを切り売りしています。

イチオシは転職体験記!それ以外は、いい歳したオッサンの反省です。反省はしますが、後悔はしていません。たぶん。

javascriptのgetElementsByNameで取得したフォームにフォーカスを当てる。

WEBプログラマー プログラミング javascript

はい、すげー短いですけど更新しておきましょう。

  • 用途:ページを開いたときに、最初に入力するフォームを指定したい。

  • 想定されるケース:例えば、idとかが割り振られていないクソコードに、新しく制御を加える場合など。

jqueryを使えば、このあたりはらくらくできるはず。

例えば、<input name="input_name" value="ちょんハリ師匠">

というnameが「input_name」のフォームがある場合。

jQueryなら、

idがあれば、

e.g.)id="form_name" の場合。

$('#form_name').focus();

ですね。

これで、ページが開かれた時に、focusされていることでしょう。(検証してないよ。)

f:id:ch_mage:20131203215456j:plain


しかし、何らかの理由でjqueryが使えない場合などは、ネイティブで書くしか無い。

しかも、IDすら振られてない場合は、neme要素で指定するしか無いんですな。

name要素で取得する場合、

var elements = document.getElementsByName("attribute");

ってな具合で取得しますよね。

で、このまま・・・

elements.focus();

ってやるじゃん?これでは動きません。

elements[0].focus();

ってやると動きます。

getElementsByName

なので、結果として、複数取得されてるんですよ。

■なぜ複数取得?

たとえば、ラジオボタンの場合、同じ名前が付いていることがよくあります。

その場合、

<label><input type="radio" name="status" value="1">ちょんハリ師匠かっこいい</label>
<label><input type="radio" name="status" value="2">ちょんハリ師匠おかねもち</label>
<label><input type="radio" name="status" value="3">ちょんハリ師匠あしくさい</label>



名前だけだと、どれもstatusになるから、指定できないこともあるんですよねー。

ってことで、複数取得なんだと思います。

getElementsByNameで、動かない!undefined!focus is not function!!みたいなエラーが出たら、何番目っていうのを指定してみるといいかもしれませんぞ。

よし、たまに書くプログラマーっぽい記事終了!!