$ .focus () nie działa

Ostatnim przykładem jQuery w focus()dokumentacji państw

$('#id').focus()

powinien sprawić, że wejście będzie skoncentrowane (aktywne). Nie wydaje mi się, żeby to działało.

Nawet w konsoli na tej stronie próbuję ją znaleźć w polu wyszukiwania

$('input[name="q"]').focus()

i nic nie dostaję. Jakieś pomysły?

Właściwie przykład, który podałeś, aby skupić się na tej stronie, działa dobrze, o ile nie jesteś skupiony na konsoli. Powodem, dla którego to nie działa, jest po prostu to, że nie kradnie ostrości z konsoli programisty. Jeśli uruchomisz następujący kod w konsoli, a następnie szybko klikniesz w oknie przeglądarki, zobaczysz, że ustawia on pole wyszukiwania:

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

Co do twojego drugiego, jedyną rzeczą, która sprawiała mi kłopoty w przeszłości, jest kolejność wydarzeń. Nie możesz wywołać focus () na elemencie, który nie został dołączony do DOM. Czy element, na którym chcesz się skupić, został już dołączony do DOM?

Znalazłem rozwiązanie w innym miejscu w sieci ...

$('#id').focus();

nie działał.

$('#id').get(0).focus();

zadziałało.

Niektóre z odpowiedzi sugerują użycie w setTimeoutcelu opóźnienia procesu skupiania się na elemencie docelowym. Jeden z nich wspomina, że ​​cel znajduje się wewnątrz okna dialogowego. Nie mogę dalej komentować poprawności setTimeoutrozwiązania, nie znając szczegółowych informacji, gdzie zostało użyte. Pomyślałem jednak, że powinienem udzielić tutaj odpowiedzi, aby pomóc ludziom, którzy natkną się na ten wątek, tak jak ja

Prosty fakt jest taki , że nie możesz skupić się na elemencie, który nie jest jeszcze widoczny . Jeśli napotkasz ten problem, upewnij się, że cel jest rzeczywiście widoczny podczas próby skupienia się na nim. W moim przypadku robiłem coś podobnego

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

To nie zadziałało. Ja tylko sobie sprawę, co się dzieje, kiedy wykonywane $ ( „# elementid”). Ostrości () `z konsoli, który zrobił pracę. Różnica - w moim kodzie nad celem nie ma pewności, że cel faktycznie będzie widoczny, ponieważ animacja może nie być kompletna . I tu jest wskazówka

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

działa zgodnie z oczekiwaniami. Ja też początkowo wprowadziłem setTimeoutrozwiązanie i też zadziałało. Jednak arbitralnie wybrany limit czasu z pewnością zepsuje rozwiązanie wcześniej lub później, w zależności od tego, jak wolno urządzenie hosta wykonuje proces zapewniania, że ​​element docelowy jest widoczny.

jeśli używasz bootstrap + modal, to zadziałało dla mnie:

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

Na wypadek gdyby ktoś inny natknął się na to pytanie i miał taką samą sytuację jak ja - próbowałem ustawić fokus po kliknięciu na inny element, ale fokus nie wydawał się działać. Okazuje się, że potrzebowałem tylko e.preventDefault();- oto przykład:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

Pomogło to:

Jeśli wywołujesz HTMLElement.focus () z modułu obsługi zdarzeń mousedown, musisz wywołać event.preventDefault (), aby fokus nie opuszczał HTMLElement. Źródło: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

Zdaję sobie sprawę, że to jest stare, ale natrafiłem na to dzisiaj. Żadna z odpowiedzi nie zadziałała dla mnie, ale okazało się, że zadziałało, to ustawiony czas. Chciałem, aby skupiłem się na polu wejściowym modalu, używając setTimeout działał. Mam nadzieję że to pomoże!

Ja też miałem ten problem. Rozwiązaniem, które zadziałało w moim przypadku, było użycie właściwości tabindex w elemencie HTML.

I był przy użyciu ng-repeatniektórych elementów li wewnątrz listy, a ja nie byłem w stanie przynieść ostrość na pierwszym li użyciu .focus (), więc po prostu dodaje się do każdego atrybutu tabindex li podczas pętli.

więc teraz <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

To +1 było indeksem zaczynającym się od 0. Upewnij się również, że element jest obecny w DOM przed wywołaniem funkcji .focus ()

Mam nadzieję, że to pomoże.

Dla tych, którzy mają problem z niedziałaniem, ponieważ użyłeś "$ (element) .show ()". Rozwiązałem to w następujący sposób:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

Więc nie potrzebujesz licznika czasu, zostanie on wykonany po zakończeniu metody show.

Dodaj opóźnienie przed aktywowaniem (). 200 ms wystarczy

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

Miałem ten problem ponownie teraz i wierz lub nie, wszystko, co musiałem zrobić, to zamknąć narzędzia programistyczne. Najwyraźniej zakładka Console ma pierwszeństwo przed zawartością strony.

Upewnij się, że element i jego elementy nadrzędne są widoczne. Nie możesz skupić się na ukrytych elementach

DODATKOWE ROZWIĄZANIE Wystąpił ten sam problem, w którym funkcja focus () wydawała się nie działać, ale ostatecznie okazało się, że potrzebne było przewijanie do właściwej pozycji:

• https://stackoverflow.com/a/43342974/1335717

W moim przypadku musiałem określić indeks zakładki ( -1jeśli można go ustawić tylko za pomocą skryptu)

<div tabindex='-1'>
<!-- ... -->
</div>