[JavaScript] フォーム部品にフォーカスをセットする

投稿日：2016年10月8日更新日：2018年5月3日

テキストボックスやラジオボタンなどのコントロールにフォーカスをセットするには、 focus()を使用します。

サンプル

例）ボタンを押すとテキストボックスにフォーカスをセットする

function setFocus(idname){
  //引数で受取ったID名のコントロールにフォーカスをセットする
  document.getElementById(idname).focus();
}

function setFocus(idname){

//引数で受取ったID名のコントロールにフォーカスをセットする

document.getElementById(idname).focus();

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" id="txt1" >
  <input type="button" value="ボタン" onclick="setFocus('txt1');">
</body>
</html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、下のテキストボックスにフォーカスが当たります

解説

テキストボックス以外のラジオボタン、チェックボックス、セレクトボックス、テキストエリア、ボタンなど画面表示される全てのコントロールに使用できます。

執筆者：とら