動作環境
- Windows 10 pro 64bit
- IE11
- jQuery JavaScript Library v3.3.1
- jquery-3.3.1.js
- Bootstrap v4.1.0
- bootstrap.css
- bootstrap.bundle.js
- Font Awesome Free 5.0.8
- fontawesome-all.js
今回の現象
本家サイトの How to Use にも記載の通り、<i>タグを使って WEB ページにアイコンを埋め込みます。
HTML 内に input 系のタグと交互に入れておくとわかりやすいです。
そして IE11 で表示して、タブキーを押します。
すると、<i>タグの数だけ、フォーカスがどこかに消えてしまいます。
Chrome ではこの現象はおきませんでした。
普通の書き方
<i class="far fa-envelope"></i>
この書き方をするとフォーカスを持ってしまいます。
やってみたけどダメだった例
<i class="far fa-envelope" tabindex="-1"></i>
tabindex を指定してもフォーカスをスキップしてくれませんでした。
回避策
<i class="far fa-envelope" focusable="false"></i>
focusable を指定することで、SVGに展開後もフォーカスを制御できるようです。
false にすることでフォーカスを持たなくなります。
これで IE でも安心してフォームの中で SVG が使えます。