focus

フォーカス（イベント）

意味要素がフォーカスされたときのイベント。

focusとは？

フォーム要素やリンクなどがフォーカスされる（選択される）ときに発火するイベント。

focusの具体的な使い方

フォーカスイベントでスタイルを変更する例

<input type='text' id='focusInput' placeholder='ここをクリックしてください'>
<p id='status'></p>

<script>
const input = document.getElementById('focusInput');
const status = document.getElementById('status');

input.addEventListener('focus', function() {
  this.style.backgroundColor = 'lightblue';
  status.textContent = 'フォーカスされました！';
});

input.addEventListener('blur', function() {
  this.style.backgroundColor = '';
  status.textContent = '';
});
</script>

テキストフィールドがフォーカスされると背景色が変わり、メッセージが表示されます。フォーカスが外れると元に戻ります。これにより、ユーザーに視覚的なフィードバックを提供できます。

focusに関するよくある質問

Q. focusイベントはどんな要素で使える？

A. 主にフォーム要素（input, textarea, select）やリンク（a要素）で使用されますが、tabindex属性を持つ要素でも使用できます。

Q. 要素にプログラムでフォーカスを当てるには？

A. JavaScript で element.focus() メソッドを呼び出すことで、プログラムから要素にフォーカスを当てることができます。

focusが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのfocusやtouchcancel、touchstart、offline、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。