小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

フォームで使えるJavaScript: ページ表示時に入力フィールドに移動する

最終更新日: 2006-03-08

入力フォームのページが表示された時に、最初に入力する(と予想できる)フィールドにカーソルが移動しているとすぐに入力を始められるので便利です。

下記リンクのページを読み込むと、始めにある「ダミーフィールド」ではなく、2番目の「キーワード」入力欄にカーソルが移動しています。

サンプルページ

この動作設定のためのJavaScriptを紹介します。

基本的な方法

<body> タグに「onLoad="document.forms[0].keyphrase.focus()"」という属性を追加します。

forms[0]」はフォームの参照です。同じページ内に<form>〜</form> が複数あるなら、「0」 の代わりに「該当フォームの出現の順番 − 1」を設定します。
例えば、2番目に出てくるフォーム内のフィールドに移動したい場合、「forms[1]」と指定して下さい。
keyphrase」 はフォームの入力フィールドの名前です。

サンプルページの例の場合、body タグ部分とフォームのコードはそれぞれ以下の通りです。

<form>
ダミーフィールド:<input name="dammy" type="text" value=""> 
キーワード:<input name="keyphrase" type="text" value="">
</form>

<body bgcolor="#FFFFFF" onLoad="document.forms[0].keyphrase.focus()">

未入力の場合のみカーソルを移動したい場合

既存の入力がある場合はカーソルを移動せず、値が空の場合のみ移動させたい場合は、以下のように条件を追加します。

<body bgcolor="#FFFFFF" 
   onLoad="if (document.forms[0].keyphrase.value=='') 
   {document.forms[0].keyphrase.focus()}">

すぐ使えるCGIの入力画面の設定

すぐ使えるCGIの入力画面でも、入力フォーム表示時に必須入力であるタイトルにこの動作設定をすれば、新規登録の時にすぐに入力が始められて便利です。
このためには、製品の templates/admin/2.html を編集して下さい。
<body> タグ部分のコードを以下のように編集します。

<BODY BGCOLOR="#FFFFFF" 
   onLoad="if (document.forms[0].subject.value=='') 
   {document.forms[0].subject.focus()}">

さらに詳しく