Wyłącz pomarańczowe wyróżnienie konturu na fokusie

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.cssaby 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.xmlpliku:

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:

1. Właściwość zarys działa tylko w przeglądarce Chrome, a nie w przeglądarce Android.

2. -webkit-tap-highlight-colorNieruchomość 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.

3. Ta -webkit-focus-ring-colorwłaściwość nie działa w żadnej z przeglądarek.

Próbować:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''

Pracuj na Androidzie Default, Android Chrome i iOS Safari 100%

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
} 

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
} 

w pliku css. U mnie zadziałało!

Usuń pomarańczowe pole na fokusie wprowadzania danych w przypadku Androida

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

dotknij-podświetl-kolor dla większości wersji

modyfikacja użytkownika dla 4.0.4

Spróbuj Focus Line

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

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.

Aby upewnić się, że tap-highlight-colornadpisywanie właściwości działa w Twoim przypadku, rozważ najpierw następujące kwestie:

Nie działa:
-webkit-user-modyfikacja: tylko do odczytu i zapisu w postaci zwykłego tekstu;
// Czasami wywołuje wyskakującą klawiaturę natywną po kliknięciu elementu

.class: aktywna, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// To nie działa, jeśli jest zdefiniowane dla stanów

Pracujący:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

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 .

Użyj poniższego kodu w pliku CSS

  * {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    :focus {
        outline: 0;
        border:none;
        color: rgba(0, 0, 0, 0);
    }

To dla mnie praca. Mam nadzieję, że to zadziała.

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:

$("map area").on("touchend", function() {
   return false;
});

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:

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */

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:

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Wypróbowałem ten i działało dobrze: -

HTML: -

<a class="html5logo"  href="javascript:void(0);"  ontouchstart="return true;"></a>

css

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

To zadziała nie tylko w przypadku kranów, ale także najechania kursorem:

button, button:hover, li:hover, a:hover , li , a , *:hover, * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />

Ta praca dla mnie w Ionic, po prostu wstaw plik CSS do nadpisania

:focus {
    outline-width: 0px;
}

Jeśli projekt nie używa konturów, powinno to wystarczyć:

*, *::active, *::focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
    -webkit-focus-ring-color: rgba(0, 0, 0, 0)!important;
    outline: none!important;
}

Spróbuj wykonać poniższy kod, który wyłącza kontur obramowania

zarys: brak! ważne;