作成日: 2016/11/22 最終更新日: 2017/04/19
文書種別
制限事項
発生環境
Microsoft Edgeのみ発生
詳細
EdgeでPopupを表示すると、Popupのホスト要素にフォーカスが当たってしまいます。
また、その状態でTabキーを押してもPopup内の要素にフォーカスが移動しません。
この現象は制限事項です。
本現象は、以下のようなサンプルでPopupの「header」div要素内にフォーカス可能な子要素がなく、またdiv要素自身にもtabindex属性がないために発生しています。このような場合、Edgeでは、div要素のtabindexに0となり、フォーカスが当たるようになります。
また、その状態でTabキーを押してもPopup内の要素にフォーカスが移動しません。
この現象は制限事項です。
本現象は、以下のようなサンプルでPopupの「header」div要素内にフォーカス可能な子要素がなく、またdiv要素自身にもtabindex属性がないために発生しています。このような場合、Edgeでは、div要素のtabindexに0となり、フォーカスが当たるようになります。
回避方法
下記コードのようにPopupの「header」div要素のtabindexを-1に設定します。
◆サンプルコード（HTML）
----------------------------------
<div id="message">
<div id="header" tabindex="-1">
タイトル
</div>
<input type="text"><br>
<input type="text"><br>
<input type="text">
<div id="footer">
<button>ボタン</button>
</div>
</div>
----------------------------------
◆サンプルコード（HTML）
----------------------------------
<div id="message">
<div id="header" tabindex="-1">
タイトル
</div>
<input type="text"><br>
<input type="text"><br>
<input type="text">
<div id="footer">
<button>ボタン</button>
</div>
</div>
----------------------------------
旧文書番号
81876