« ダイナミックディスク⇔ベーシックディスクにはまる・・。 | メイン | さくらのレンタルサーバ へ PHP5.2.2 をインストールした »

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

ページを開いた際、入力して欲しいフォーム部分に、
最初から自動でフォーカスをあててあげるスクリプト。
何気ない処理ですが、ユーザーには嬉しいですよねぇ。
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誌のサンプルページなのかしら??)

AD:

コメント (2)

磨者と飲みたい
いつも飲んでるけどw

あーwそうだねぇw
また日曜くらい呑みましょううへへ。

コメントを投稿

(コメントはブログオーナーの承認制です。しばらくお待ちください。)

今日のひと言

呑みいきたい!

磨者のはてなブックマーク はてなブックマーク

PHOTO COLLECTION

【WordPress】Ktai Entryをさくらで使う【メール投稿プラグイン】 : Go-PEARを使ったPEARのインストール : PEAR2.gif EmEditor で ダイレクトタグジャンプ : emeditor.gif WindowsXP へ XAMPP をインストール : xammp.jpg 携帯サイトで文字化け : 070707.gif 動的ページを静的URLで表示させる(PATH_INFO使用) : 400-300.gif PHP4でSmarty、tplファイルしか表示されないのは参照渡しが原因でした : php4%2Bsmarty.gif Dreamwerver で Smarty : Macromedia-Dreamweaver.gif MySQLの自動バックアップ phpMyBackupPro : logo.png さくらのレンタルサーバ へ PHP5.2.2 をインストールした : php.gif ダイナミックディスク⇔ベーシックディスクにはまる・・。 : 294574802_636f6f5e8c.jpg
RSS 2.0(XML)

Add to Google
My Yahoo!に追加
ADD TO Hatena::RSS
Subscribe with livedoor Reader

(→RSS/FEEDとは?

CLUB BASE st.215 最新NEWS