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

フォームの入力欄のうち、日付情報など「変更する時は全体を書き換える」という項目の場合、その項目にフォーカス（カーソル）が移動したときに既存の入力の全てを選択する（反転させる）ようにしておけば、そのまま文字入力すれば全てが書き換わるので便利です。

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

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

動作サンプル

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

年　月　日

設定方法

このように動作させるには、入力欄のタグに「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()"> 日

「すぐ使えるCMS」の入力画面の設定

「すぐ使えるCMS」の入力画面でこの動作設定をするためには、製品の 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>