ページを開いた際、入力して欲しいフォームにフォーカスをあてる

ページを開いた際、入力して欲しいフォーム部分に、
最初から自動でフォーカスをあててあげるスクリプト。
何気ない処理ですが、ユーザーには嬉しいですよねぇ。
JavaScriptでカンタンに仕込めます。


■ある一つのフォームに必ずフォーカス

<script type="text/javascript" language="javascript">
  <!–
  document.forms[‘(formタグのname)’].elements[‘(formパーツのname)’].focus();
}
  //–>
</script>

■複数のフォームを判定しつつフォーカス
(○○の値が空なら○○にフォーカス、じゃなければ△△へフォーカス)

<script type="text/javascript" language="javascript">
  <!–
  var ○○ = document.forms[‘(formタグのname)’].elements[‘(formパーツのname)’];
  var △△ = document.forms[‘(formタグのname)’].elements[‘(formパーツのname)’];
  if (○○.value == ”) {
    ○○.focus();
  } else {
    △△.focus();
  }
  //–>
</script>

focus()は、フォームだけでなくウィンドウなども取り扱い可。
[とほほ]Javascript ウィンドウ(Window)
ポップアップさせたウィンドウのbodyタグを

<body onload="self.focus()>

などやるといいかも。

■ついでに、フォーカスの際、さらにインプットフォームの色まで変えてやるスクリプト↓

//フォームホーバー時の背景色変更
function hoverInputBgcl(oj,color)
{
oj.style.backgroundColor=color
}

を読み込んで、

<input type="text" onfocus="hoverInputBgcl(this,’ffcc33′)" onblur="hoverInputBgcl(this,’#EFEFEF’)">

こんな感じ。

その他諸々かなり参考になったサイト
http://book.mycom.co.jp/wd/sampledata/200401view/javascriptlab/index.htm
(Web Designing誌のサンプルページなのかしら??)

2件のコメント

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です