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

初心者向けにJavaScriptでフォーカス移動する方法について現役エンジニアが解説しています。フォーカスはある要素に対してアクティブな状態になっていることで、クリックやtabキーが当てはまります。JavaScriptである要素にフォーカスさせるにはfocusメソッドを利用します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでフォーカス移動する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(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)

 

筆者プロフィール

メンター久保田さん

Webシステム開発が中心のシステムエンジニア。

HTML、CSS、JavaScript(React、Vue.js)、PHP、Javaが守備範囲。最初に選ぶポケモンは炎タイプ。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

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