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

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

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

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

 

そもそも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)

 

筆者プロフィール

メンター久保田さん Webシステム開発が中心のシステムエンジニア。 HTML、CSS、JavaScript（React、Vue.js）、PHP、Javaが守備範囲。最初に選ぶポケモンは炎タイプ。

 

 

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。