フォームの小技
フォーム編の最後としてちょっとした小技を幾つか紹介します。 フォーカスを移動したり、テキストを選択状態にしてみます。
フォーカスを操作する
最初にフォーカスを合わせたり外したりしてみます。 これは、最初に入力してもらいたい枠にフォーカスを合わせておく場合などに使用します。
<form name="FOCUS"> <input type="text" value="text1"> <input type="button" value="合わせる" onclick="FC(0)"> <input type="button" value="外す" onclick="BL(0)"><br> <input type="text" value="text2"> <input type="button" value="合わせる" onclick="FC(3)"> <input type="button" value="外す" onclick="BL(3)"><br> </form> <script type="text/javascript"> <!-- //フォーカスを合わせる関数 function FC(num){ document.FOCUS.elements[num].focus(); } //フォーカスを外す関数 function BL(num){ document.FOCUS.elements[num].blur(); } // --> </script>
サンプル
フォームの名前は大文字で「FOCUS」にしました。 二つのテキストボックスと、それぞれにフォーカスを合わせる/外すためのボタンを設置しています。
フォーカスを合わせたり、外したりするJavaScriptの命令文は以下のようになります。
- フォーカスを合わせる
- document.form名.elements[].focus()
- フォーカスを外す
- document.form名.elements[].blur()
上記のスクリプトでは、それぞれの関数に引数「num」を設けて、 フォーカスをON/OFFするテキストボックスを選択できるようにしました。 最初のテキストボックスはelements[]の番号が０、次のテキストボックスは３になるので、 関数を呼び出す時にそれぞれの数字をカッコ内に入れています。
テキストを選択する
テキストボックスやテキストエリアの文字列を全て選択状態にして、 コピーしてもらい易くする方法についてみてみます。 上記の関数FC()に下記のように一行追加してみてください。
function FC(num){
document.FOCUS.elements[num].focus();
document.FOCUS.elements[num].select();
}
サンプル
今度はフォーカスが合った時に自動的にテキスト選択状態になります。 （ブラウザによってはfocus()だけでも選択状態になりますが、こちらの方が確実です）。 テキストを選択状態にする命令文は以下の通りです。
- テキストを選択状態にする
- document.form名.elements[].select()
その他の操作
その他にできる操作について簡単に掲載しておきます。
- 自動的にクリックする
- document.form名.elements[].click()
- 初期化する（リセットボタンと同じ役目）
- document.form名.reset()
- 送信する（submitボタンの同じ役目）
- document.form名.submit()
初期化と送信の場合はelements[]は付きません。 submit()はブラウザやユーザーの設定により正しく動作しないことが多いので、 使わない方が無難です。