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

入力フォームのページが表示された時に、特に何も設定していない場合はページ上の最初の要素に見えないフォーカスがあり、すぐには入力できません。キーボードのある端末の場合は、タブキーを押すとリンクや入力欄などに順にフォーカスが移動しますが、何度かキーを押す必要があります。

このページでは、最初に入力する（と予想できる）入力欄に、ページ表示時にフォーカスを移動する方法をご紹介します。

フォーカス移動のサンプルページ

上記ボタンからリンクできるサンプルページでは、始めにある「ダミーフィールド」ではなく、2番目の「キーワード」入力欄にカーソルが移動しています。

基本的な設定方法

入力フォームのあるページの <body> タグに、以下の様に onLoad属性を追加するのが基本的な方法です。「すぐ使えるCGI」製品に限らずこの方法は使えます。

コピー

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

同じページ内にフォームが複数ある場合は、赤字の「0」の代わりに「該当フォームの出現の順番－ 1」を設定して下さい。青字の「keyphrase」は、フォーカスしたい入力欄の name属性を指定して下さい。

ファイルを編集したら、サーバに上書きアップロードして動作確認を行って下さい。

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

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

コピー

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

$(document).ready という記載がある場合

ページ内に「$(document).ready」という記載がある場合は、<body> タグに直接 onLoad 属性を指定してしまうとうまくいきません。ページ内検索をしてこの記載があったら、フォーカスの指定は下記の場所に設定して下さい。

コピー

$(document).ready(function(){
    /* ここに何か書いてある筈 */
    
    /* 以下のように追加 */
    document.forms[0].keyphrase.focus();
    /* または */
    if (document.forms[0].keyphrase.value=='') 
        {document.forms[0].keyphrase.focus();}
});

「すぐ使えるCMS」での設定

入力画面のタイトル欄にフォーカス

「すぐ使えるCMS」の入力画面で、入力フォーム表示時にタイトル欄にフォーカスするには templats/admin/2.html に下記の様に追加して下さい。

コピー

<body onload="hide_format();document.forms[0].subject.focus();">

ログイン画面のユーザ名欄にフォーカス

「すぐ使えるCMS」のログイン画面で、ページ表示時にユーザ名欄にフォーカスするには templats/admin/6.html に下記の様に追加して下さい。

コピー

<body onLoad="document.forms[0].admin_name.focus();">