Koduję aplikację za pomocą jQuery, jqTouch i phonegap i napotkałem trwały problem, który pojawia się, gdy użytkownik przesyła formularz za pomocą przycisku Go na klawiaturze programowej.
Chociaż użycie kursora do odpowiedniego elementu wejściowego formularza jest łatwe $('#input_element_id').focus()
, pomarańczowe wyróżnienie konturu zawsze powraca do ostatniego elementu wejściowego w formularzu. (Podświetlenie nie pojawia się, gdy formularz jest przesyłany za pomocą przycisku przesyłania formularza).
To, czego potrzebuję, to znaleźć sposób na całkowite wyłączenie pomarańczowego podświetlenia lub przeniesienie go do tego samego elementu wejściowego, co kursor.
Do tej pory próbowałem dodać do mojego CSS:
.class_id:focus {
outline: none;
}
To działa w Chrome, ale nie w emulatorze ani na moim telefonie. Próbowałem również edytować jqTouch, theme.css
aby przeczytać:
ul li input[type="text"] {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
}
Bez skutku. Wypróbowałem również każdy z następujących dodatków do AndroidManifest.xml
pliku:
android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"
Żadne z nich nie ma żadnego efektu.
Aktualizacja: zrobiłem więcej rozwiązywania problemów z tym i do tej pory znalazłem:
Właściwość zarys działa tylko w przeglądarce Chrome, a nie w przeglądarce Android.
-webkit-tap-highlight-color
Nieruchomość ma w rzeczywistości pracy na Android przeglądarki, choć nie na Chrome. Wyłącza podświetlenie na fokusie, a także po dotknięciu.Ta
-webkit-focus-ring-color
właściwość nie działa w żadnej z przeglądarek.
Pracuj na Androidzie Default, Android Chrome i iOS Safari 100%
źródło
*
, możesz po prostu użyćbutton
, jeśli problem dotyczy na przykład przycisków.w pliku css. U mnie zadziałało!
źródło
Usuń pomarańczowe pole na fokusie wprowadzania danych w przypadku Androida
dotknij-podświetl-kolor dla większości wersji
modyfikacja użytkownika dla 4.0.4
źródło
Spróbuj Focus Line
źródło
Należy pamiętać, że użycie tego CSS
-webkit-user-modify: read-write-plaintext-only;
spowoduje usunięcie tego okropnego `` błędu '' podświetlenia - ALE może to zabić zdolność urządzenia do zapewnienia określonej klawiatury. W przypadku systemu Android 4.0.3 na karcie Samsung Tab 2 nie mogliśmy już uzyskać klawiatury numerycznej. Nawet używając type = 'number' i / lub type = 'tel'. Bardzo frustrujące! BTW, ustawienie koloru podświetlenia kranu nie pomogło w rozwiązaniu tego problemu dla tego urządzenia i konfiguracji systemu operacyjnego. Używamy Safari dla Androida.źródło
Aby upewnić się, że
tap-highlight-color
nadpisywanie właściwości działa w Twoim przypadku, rozważ najpierw następujące kwestie:Ten przypadek działa na Androida od v2.3 do v4.x, nawet w aplikacji PhongeGap. Testowałem go na Galaxy Y z Androidem 2.3.3, na Nexusie 4 z Androidem 4.2.2 i na Galaxy Note 2 z Androidem 4.1.2. Więc nie definiuj tego dla stanów tylko dla samego elementu .
źródło
Użyj poniższego kodu w pliku CSS
To dla mnie praca. Mam nadzieję, że to zadziała.
źródło
To nie zadziałało w przypadku linków do obszaru mapy obrazu, jedynym działającym rozwiązaniem było użycie javascript, przechwytując zdarzenie ontouchend i zapobiegając domyślnemu zachowaniu przeglądarki, zwracając false w module obsługi.
z jQuery:
źródło
Chciałem tylko podzielić się swoim doświadczeniem. Tak naprawdę to nie zadziałało i chciałem uniknąć powolnego css- *. Moim rozwiązaniem było pobranie starego dobrego Erica Meyera Reset CSS v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) i dodanie tego do mojego projektu phonegap. Następnie dodałem:
Z mojego doświadczenia wynika, że jest to szybsze podejście do *, ale jest to również podejście do mniej dziwnych błędów. Kombinacja tap-highlight, -webkit-user-modyfikacja: tylko do odczytu-zapisu-zwykłego tekstu i wyłączenie na przykład podświetlania tekstu dostarczyło nam wielu informacji. Jednym z najgorszych jest to, że nagle przestaje działać wprowadzanie z klawiatury i powolna wizualizacja klawiatury.
Zakończ resetowanie CSS z wyłączonym pomarańczowym podświetleniem:
źródło
Wypróbowałem ten i działało dobrze: -
HTML: -
css
źródło
To zadziała nie tylko w przypadku kranów, ale także najechania kursorem:
źródło
źródło
Ta praca dla mnie w Ionic, po prostu wstaw plik CSS do nadpisania
źródło
Jeśli projekt nie używa konturów, powinno to wystarczyć:
źródło
Spróbuj wykonać poniższy kod, który wyłącza kontur obramowania
źródło