目次

• focus が効かない？
• 参考

focus が効かない？

JavaScript で特定の要素にフォーカスを移したい時がある。
その場合、$('.myclass').focus() などのようにすればフォーカスを移せるが、これが効かない時がある。
div などの要素にフォーカスを移したい時は div に tabindex を設定する必要がある。
だから HTML は↓のような感じになる。

<div class="myclass" tabindex="0">
</div>

この .myclass にフォーカスを移したい場合は↓のように focus メソッドを使う。

$('.myclass').focus()

ちなみにこの方法だと div にフォーカス時のアウトラインが表示されてしまうので、これを消したい場合は↓のように CSS を書く。

.myclass:focus {
  outline: none;
}

参考

• HTMLElement.focus() - Web API | MDN
• javascript - JS Focus Scrollable Div - Stack Overflow
• tabindex - HTML: HyperText Markup Language | MDN