w iOS8 za pomocą.focus () wyświetli wirtualną klawiaturę i przewijanie strony po dotknięciu
Przed iOS8 użycie metody Javascript .focus() na elemencie wejściowym wydaje się nie mieć żadnego efektu (wirtualna klawiatura nie wyświetla się). Po najnowszym wydaniu iOS 8 uruchamianie metody .focus() wydawało się nie mieć wpływu na ładowanie strony, ale gdy użytkownik dotknie dowolnego miejsca na ekranie, wirtualna klawiatura natychmiast pojawi się i przewija stronę do elementu w centrum uwagi. (Jest to również problem, gdy używam atrybutu HTML "autofocus")
Ta zmiana spowodowała problemy z iOS8 użytkowników na mojej stronie. Gdy użytkownik próbuje kliknąć przycisk na mojej stronie, nagłe przewijanie i pojawienie się klawiatury powoduje niezamierzone kliknięcie przycisku, który był niższy na ekranie.
Zakładam, że jest to błąd w iOS8 i nie był to celowy problem, moje pytanie brzmi, Jakie jest najskuteczniejsze rozwiązanie tego problemu?
Czy muszę sprawdzać navigator.userAgent, aby sprawdzić, czy urządzenie jest iOS8, za każdym razem, gdy używam metody .focus()?
7 answers
Wygląda na to, że na pewno trafiłeś w błąd iOS 8. W iOS7 Safari (najwyraźniej) ignoruje lub zachowuje nieostre elementy, które ustawiono ostrość przed załadowaniem strony. Obejmuje to zarówno <input autofocus> i input.focus(), które występują do pewnego momentu, ewentualnie ładowanie strony (testowałem tylko skrypt wbudowany).
Obie przeglądarki zachowują się tak samo dla input.focus() występujących po załadowaniu strony. Oba przybliżają element i przywołują klawiaturę.
Testy:
-
input.focus()przed załadowaniem strony: http://fiddle.jshell.net/qo6ctnLz/3/show / -
<input autofocus>: http://fiddle.jshell.net/qo6ctnLz/4/show / -
input.focus()Po załadowaniu strony: http://fiddle.jshell.net/qo6ctnLz/6/show /
Dobrą wiadomością jest to, że ty tylko musisz się martwić o nowe zachowanie na elementach, które chcesz wstępnie ustawić. Inną dobrą wiadomością jest to, że chociaż będziesz musiał użyć obejścia user-agent, możesz go używać dla wszystkich wersji iOS, ponieważ już zachowywały się tak, jakbyś nie był autofokusem: {]}
if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
element.focus();
}
To wygląda na podejście http://www.google.com zastosowania oparte na kilku podstawowych testach user-agent:
- Mac Book Pro: autofocus przed załadowaniem strony.
- iPhone: no autofocus
- iPad: nie autofocus
- Kit Kat( Android): focus Po załadowaniu strony, ewentualnie wykonując dodatkowe wykrywanie obecności klawiatury programowej.
Jeśli tego nie zrobiłeś, powinieneś zgłosić radar do Apple pod adresem https://bugreport.apple.com .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-09 21:58:58
Jeśli rozwijasz projekt Cordova, można naprawić dodając tę linię
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
Do twojego config.xml Pliku. Testowane w systemie IOS 8.3 i IOS 8.4 [3]}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-15 08:41:56
Wygląda na to, że w iOS 8 nastąpiła zmiana interfejsu API w domyślnej obsłudze polecenia javascript focus (). Jeśli Twoja aplikacja jest aplikacją hybrydową, w której masz bezpośrednią kontrolę nad widokiem sieciowym Apple, poniżej znajduje się bezpośrednio z apples docs.
Wartość logiczna wskazująca, czy zawartość WWW może programowo wyświetl klawiaturę.
[myWebView setKeyboardDisplayRequiresUserAction:YES];
Gdy ta właściwość jest ustawiona na YES, Użytkownik musi wyraźnie dotknąć elementy w widoku www wyświetlające klawiaturę (lub inne istotne input view) dla tego elementu. Gdy ustawione na nie, Zdarzenie fokus na element powoduje wyświetlenie widoku wejściowego i powiązanie z nim element automatycznie.
Wartością domyślną dla tej właściwości jest Yes.
Z ostatniego akapitu wynika, że wywołanie tej metody nie jest wyłącznie dla Klawiatury. Wskazuje, że jest to dla wejściowych widoków na całej planszy, tj. spadek down I date picker itp.
Wydaje się jednak, że jest błąd, ponieważ wywołanie tej metody nie działa obecnie dla mnie. Bieżące zachowanie, które otrzymuję, odpowiada tak, jakby domyślnie nie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-15 00:44:35
Mam rozwiązanie:
- Wyłącz wszystkie wejścia
- Włącz wejście, które chcesz skupić
- Ustaw ostrość na to wejście
- włącz ponownie wszystkie pozostałe wejścia
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-11 14:50:24
Oto warunkowy monkeypatch dla jQuery.focus, więc nie musisz dodawać testu userAgent wszędzie.
JavaScript
if (/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
(function($) {
return $.fn.focus = function() {
return arguments[0];
};
})(jQuery);
}
CoffeeScript
if /iPad|iPhone|iPod/g.test navigator.userAgent
(($) ->
$.fn.focus = ->
arguments[0]
)(jQuery)
Uwaga: zwracam arguments[0] więc nie przerywamy łańcuchowania metodą np. $(el).focus().doSomethingElse()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-27 23:45:44
Zalogowałem błąd o tym do Apple Bug Reporter i zamknęli go jako DUPLIKAT, co jest znakiem, że pracują nad naprawą tego. Niestety nie dali mi więcej informacji na temat duplikatu lub samego problemu. Widzę tylko stan zduplikowanego elementu, który jest otwarty.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-01 15:29:45
Dla każdego, kto przyjdzie do tego na 2018, istnieje wtyczka, która to naprawi. Po prostu zainstaluj to https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix i input.focus() będą działać automatycznie bez żadnej dodatkowej pracy.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-26 18:21:48