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

初心者向けにJavaScriptでフォーカス移動する方法について現役エンジニアが解説しています。フォーカスは選択という意味もあり、HTML要素などが選択や入力可能になった状態のことを言います。JavaScriptではfocusというメソッドを使ってフォーカス移動します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

 

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでフォーカス移動する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

フォーカスとは

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

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

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

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

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

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

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

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

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

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

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

まずは簡単な例として下記のような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では、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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