フォームの小技JavaScript入門

  1. HOME
  2. JavaScript入門
  3. フォームの小技

フォーム編の最後としてちょっとした小技を幾つか紹介します。 フォーカスを移動したり、テキストを選択状態にしてみます。

フォーカスを操作する

最初にフォーカスを合わせたり外したりしてみます。 これは、最初に入力してもらいたい枠にフォーカスを合わせておく場合などに使用します。

<form name="fcset">
<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>

//フォーカスを合わせる関数
function fc(num){
  document.fcset.elements[num].focus();
}

//フォーカスを外す関数
function bl(num){
  document.fcset.elements[num].blur();

}
</script>

サンプル



フォームの名前は「fcset」にしました。 二つのテキストボックスと、それぞれにフォーカスを合わせる/外すためのボタンを設置しています。

フォーカスを合わせたり、外したりするJavaScriptの命令文は以下のようになります。

document.form名.elements[].focus()
フォーカスを合わせる
document.form名.elements[].blur()
フォーカスを外す

上記のスクリプトでは、それぞれの関数引数「num」を設けて、 フォーカスをON/OFFするテキストボックスを選択できるようにしました。 最初のテキストボックスはelements[]の番号が0、次のテキストボックスは3になるので、 関数を呼び出す時にそれぞれの数字をカッコ内に入れています。

テキストを選択する

テキストボックスやテキストエリアの文字列を全て選択状態にして、 コピーしてもらい易くする方法についてみてみます。 上記の関数fc()に下記のように一行追加してみてください。

function fc(num){
  document.fcset.elements[num].focus();
  document.fcset.elements[num].select();
}

サンプル



今度はフォーカスが合った時に自動的にテキスト選択状態になります。 (ブラウザによってはfocus()だけでも選択状態になりますが、こちらの方が確実です)。 テキストを選択状態にする命令文は以下の通りです。

document.form名.elements[].select()
テキストを選択状態にする

その他の操作

その他にできる操作について簡単に掲載しておきます。

document.form名.elements[].click()
自動的にクリックする
document.form名.reset()
初期化する(リセットボタンと同じ役目)
document.form名.submit()
送信する(submitボタンの同じ役目)

初期化と送信の場合はelements[]は付きません。 submit()はブラウザやユーザーの設定により正しく動作しないことが多いので、 使わない方が無難です。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers