Jak ustawić fokus na okno modemu javascript?

Question

Nasza strona internetowa zawiera część javascript, która tworzy nakładkowe okna modalne.

Jest to jednak jeden problem z dostępnością, po uruchomieniu modul, focus nadal znajduje się na elemencie wyzwalającym, a nie na samym modale.

Te moduły mogą zawierać różnego rodzaju elementy html, nagłówki, akapity i formanty formularzy. To, co chciałbym, to zacząć od pierwszego elementu w modalu, więc najprawdopodobniej będzie to tag h4.

Mam zbadane za pomocą funkcji focus() jednak to nie działa z wieloma elementami HTML.

Jedną z nich było dodanie pustego znacznika a w oknie, które może uzyskać fokus, ale nie jestem pewien tej metody.

Answer 1

Możesz dodać pole tekstowe na początek modalnego HTML, ustawić ostrość, a następnie ukryć pole tekstowe. Powinien mieć pożądany efekt, o ile rozumiem Twoje potrzeby.

Answer 2

Możesz spróbować zamazać() the element that has the focus.

Answer 3

bardzo późno na imprezę, ale istniejące odpowiedzi nie respektują dostępności.

W3C wiki page on accessible modals oferuje większą wiedzę niż co poprosił w PO, odpowiednia część jest o tabindex=-1 na pojemniku modalnej (która powinna również mieć atrybut aria-dialog), więc można go dostać :focus.

To jest najbardziej przystępny sposób na skupienie się na modalu, jest też więcej dokumentacji o zachowaniu go tylko w modalu - i zwrócenie go do elementu, który uruchomił modal - całkiem sporo do wyjaśnienia tutaj, więc sugeruję wszystkim zainteresowanym sprawdzenie powyższego linku.