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

フォームで使えるJavaScript: フォーカスした時に選択する

最終更新日: 2006-03-08

フォームの入力フィールドのうち、日付情報など「変更する時は大体の場合全体を変更する」というフィールドの場合、そのフォームにフォーカス(カーソル)が移動したときに予め全てを選択するようにしておけば、そのまま入力すれば全てが書き換わるので便利です。

以下の入力フィールドは、マウスでそれぞれのフィールドに移動したとき、年フィールドはカーソルがそこに移動するだけですが、月と日のフィールドは全体が選択されます。日付を変更する時は、「旧い日付を削除->新しい日付を入力」という手順を踏まなくても、そのまま新しい日付を入力すればOKです。

年 月 

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

※タブキーでフィールドを移動した時は、JavaScriptを設定しなくても全体が選択されるのが一般的です。

基本的な方法

設定したい入力フィールドのタグに「onFocus="this.select()"」という属性を追加します。
上記のフィールドの場合、以下のように月と日付の部分にこの属性が付いています。

<input name="yyyy" type="text" value="2006" size="8"> 年
<input name="mm" type="text" value="03" size="4" onFocus="this.select()"> 月 
<input name="dd" type="text" value="08" size="4" onFocus="this.select()"> 日

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

すぐ使えるCGIの入力画面でこの動作設定をするためには、製品の templates/admin/2.html を編集して下さい。
日付欄部分のコードを以下のように編集します。

<TR>
<TH CLASS="titem">日付※</TH>
<TD CLASS="contents">
<INPUT name="yyyy" type="text" value="%_yyyy_%" size="8" maxlength="4">
年 
<INPUT name="mm" type="text" value="%_mm_%" size="4" 
   maxlength="2" onFocus="this.select()">
月 
<INPUT name="dd" type="text" value="%_dd_%" size="4" 
   maxlength="2" onFocus="this.select()">
日 (半角。年は西暦 4 桁。)
</TD>
</TR>

関連リンク

さらに詳しく