onload時に検索ボックスにフォーカスするJS

/web/javascript

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

とりあえずメモっとく企画。以下みたく、あらかじめページ読み込み時に選択させておくことで、入力の手間を省くことができる。Googleもそうなってるね。

検索フォーム

Script

  1. window.onload = afocus;
  2.  
  3. function afocus() {
  4. var x = document.getElementById('sampleForm').find;
  5. x.focus();
  6. }

1行目を次のように書くと、関数に引数を渡すことができる。

  1. window.onload=function (){
  2. afocus('sampleForm');
  3. }

onloadイベントを纏めて書きたいときや、引数を渡したい時なんかに便利。もっとも今回の場合は、（フォーカスさせるべき要素は少ないので）最初の例で十分だと思う。

  1. document.getElementById('sampleForm').find.focus();

このように4～5行目を1行に纏めてしまうこともできるし。

memo: onloadイベントは読み込み終了後に実行されるので、ページが重い場合は、関数自体を<body>内に設置したほうが良い場合もある。

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。