JavaScriptでフォーカス移動する方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォーカス移動する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

フォーカスとは

Webページで押したボタンが細くて青い枠線で囲われたり、入力項目をクリックしたときに入力できる状態を表す縦棒が現れたりすることがあります。

この状態をその要素にフォーカスしていると言います。JavaScriptでは、このフォーカスを制御できます。

しかし、一体それにはどのようなメリットがあるのでしょうか？

例えば、ログイン画面を開いたときに最初からユーザー名の入力項目にフォーカスしていたら、マウスを動かす手間が省けます。

あるいは、チェックボックスにチェックを付けたら、テキストを入力するエリアが有効になって、そのエリアが必須項目であったとします。このとき、そのテキストを入力するエリアへ勝手にフォーカスしてくれるととても親切です。
 

JavaScriptでフォーカス移動する方法

JavaScriptでフォーカス移動するにはfocusというメソッドを使います。

フォーカスしたいHTML要素を取得して、このメソッドを呼び出すだけでフォーカス移動します。

focusはメソッドなので、後ろにカッコを付け忘れないように注意しましょう。
 

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

それでは実際にフォーカス移動するコードを書いてみます。

まずは簡単な例として下記のようなHTMLを用意します。

<button>Click</button>
<input type="text" id="sample">

続いてJavaScriptを記述します。

const button = document.querySelector('button')
const focus = () => document.getElementById('sample').focus()
button.addEventListener('click', focus)

ボタンを押すと入力項目にフォーカス移動する処理です。

次に、チェックボックスにチェックを付けたら、テキストを入力するエリアが有効になり、そこへフォーカス移動するコードを書いてみます。

まずは下記のようなHTMLを用意します。

<input type="checkbox" id="sample">
<label for="sample">Check</label>
<textarea disabled></textarea>

続いてJavaScriptを記述します。

const checkbox = document.getElementById('sample')
const textarea = document.querySelector('textarea')
const focus = e => {
  textarea.disabled = !e.target.checked
  textarea.focus()
}
checkbox.addEventListener('change', focus)

 

筆者プロフィール

小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。