JavaScriptのclick・blur・focus・selectとは？入力欄の操作を自動化する方法を解説
click()・blur()・focus()・select() は、
フォーム要素に対して「クリック」「フォーカス移動」「文字選択」などの操作を
JavaScript から自動的に実行するためのメソッドです。
click()メソッドとは？
click() は、ボタンやチェックボックスなどの要素を
JavaScript から自動的にクリックする メソッドです。
// フォーム form1 のボタン btn1 を自動クリック
document.form1.btn1.click();
document.form1.btn1.click();
→ ボタンを押さなくてもクリックイベントを発生させられます。
blur()メソッドとは？
blur() は、入力欄からフォーカス（カーソル）を外すメソッドです。
// 最初のフォームの最初のエレメントからフォーカスを外す
document.forms[0].elements[0].blur();
document.forms[0].elements[0].blur();
→ 入力チェック後にフォーカスを移動させたいときに便利。
focus()メソッドとは？
focus() は、指定した入力欄にフォーカスを移動させるメソッドです。
// フォーム form1 の nickname にフォーカスを合わせる
document.form1.nickname.focus();
document.form1.nickname.focus();
→ 入力を促したいフィールドに自動でカーソルを移動できます。
select()メソッドとは？
select() は、入力欄の文字列をすべて選択状態にするメソッドです。
ただし、select() を使う前に focus() でフォーカスを合わせておく必要があります。
// nickname の文字列を選択状態にする
document.form1.nickname.select();
document.form1.nickname.select();
→ 入力欄の内容を一括で編集したいときに便利。
実際のフォーム例
<form name=”form1″>
ニックネーム：<input type=”text” name=”nickname” value=”サンプル”><br><br>
ニックネーム：<input type=”text” name=”nickname” value=”サンプル”><br><br>
<input type=”button” value=”自動クリック” onclick=”document.form1.btn1.click()”>
<input type=”button” value=”フォーカス” onclick=”document.form1.nickname.focus()”>
<input type=”button” value=”文字選択” onclick=”document.form1.nickname.select()”>
<input type=”button” name=”btn1″ value=”クリックされました”>
</form>
まとめ
click()：ボタンなどを自動クリックblur()：入力欄からフォーカスを外すfocus()：入力欄にフォーカスを移動select()：入力欄の文字列を選択状態にする（focus が必要）- フォーム操作を自動化する際に非常に便利なメソッド
