android - sirve - Desactivar resaltado de contorno naranja en el enfoque

para que sirve el corrector morado

Question

Estoy codificando una aplicación usando jQuery, jqTouch y phonegap y me he topado con un problema persistente que surge cuando un usuario envía un formulario usando el botón Ir en el teclado virtual.

Aunque es fácil hacer que el cursor se mueva al elemento de entrada de formulario apropiado usando $(''#input_element_id'').focus() , el resaltado de contorno naranja siempre regresa al último elemento de entrada en el formulario. (Lo más destacado no aparece cuando el formulario se envía utilizando el botón de envío de formulario).

Lo que necesito es encontrar una forma de desactivar completamente el resaltado naranja o bien hacer que se mueva al mismo elemento de entrada que el cursor.

Hasta ahora, he intentado agregar lo siguiente a mi CSS:

.class_id:focus {
    outline: none;
}

Esto funciona en Chrome pero no en el emulador o en mi teléfono. También he intentado editar el jqTouch theme.css para leer:

ul li input[type="text"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
}

Sin efecto. También probé cada una de las siguientes adiciones al archivo AndroidManifest.xml :

android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"

Ninguno de los cuales tiene ningún efecto.

Actualización: He hecho algo más de solución de problemas con esto y hasta la fecha he encontrado:

1. La propiedad de esquema solo funciona en Chrome, no en el navegador de Android.

2. La -webkit-tap-highlight-color funciona de hecho en el navegador Android, aunque no en Chrome. Deshabilita el resaltado en el enfoque así como al tocar.

3. La -webkit-focus-ring-color no parece funcionar en ninguno de los navegadores.

Answer 1

Esto funcionará no solo para grifos, sino también para flotar:

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

Answer 2

Esto no funcionó para mí en los enlaces del Área del mapa de imagen, la única solución que funcionaba era usar javascript capturando el evento ontouchend y evitando el comportamiento predeterminado del navegador devolviendo false en el controlador.

con jQuery:

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

Answer 3

He probado este y funcionó bien:

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);
}

Answer 4

Intenta seguir el código que desactiva el contorno de la frontera

esquema: ninguno! importante;

Answer 5

Para asegurarse de que la anulación de la propiedad tap-highlight-color funciona para usted, considere primero estas cosas:

No funciona:
-webkit-user-modify: leer-escribir-solo-texto-claro;
// A veces activa el teclado nativo para que aparezca cuando se hace clic en el elemento

.class: active, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// No funciona si está definido para estados

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

Este caso funciona para Android desde v2.3 a v4.x incluso en una aplicación PhongeGap. Lo probé en Galaxy Y con Android 2.3.3, en Nexus 4 con Android 4.2.2 y en Galaxy Note 2 con Android 4.1.2. Entonces no lo defina para estados solo para el elemento en sí.

Answer 6

Prueba para Focus Line

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

Answer 7

Retire la caja naranja en el foco de entrada para Androids

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

tap-highlight-color para la mayoría de las versiones

user-modify para 4.0.4

Answer 8

Si el diseño no usa contornos, esto debería hacer el trabajo:

*, *::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;
}

Answer 9

Solo quería compartir mi experiencia. Realmente no conseguí que esto funcionara, y quería evitar la lenta css- *. Mi solución fue descargar el antiguo Restablecimiento CSS v2.0 de Eric Meyer ( http://meyerweb.com/eric/tools/css/reset/ ) y agregar este a mi proyecto de fajo telefónico. Luego agregué:

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

En mi experiencia, este es un enfoque más rápido para el *, pero también es un enfoque para errores menos extraños. La combinación de resaltado de tap, -webkit-user-modify: lectura-escritura-texto-claro-solo y la desactivación de, por ejemplo, resaltado de texto nos han proporcionado muchos dolores de cabeza. Una de las peores es que, de repente, la entrada del teclado deja de funcionar y la visualización lenta del teclado.

Complete el restablecimiento de CSS con el resaltado naranja desactivado:

/**
 * 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;
}

Answer 10

Tenga en cuenta que al usar este CSS -webkit-user-modify: read-write-plaintext-only; ELIMINARÁ ese "error" de resaltado horrible - PERO puede matar la capacidad de su dispositivo de proporcionar un teclado específico. Para nosotros con Android 4.0.3 en una Samsung Tab 2, ya no podíamos obtener el teclado numérico. Incluso usando type = ''number'' y / o type = ''tel''. ¡Muy frustrante! Por cierto, establecer el color de resaltado no hizo nada para resolver este problema para este dispositivo y la configuración del sistema operativo. Estamos ejecutando Safari para Android.

Answer 11

Trabajo en Android predeterminado, Android Chrome y 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;
} 

Answer 12

Tratar:

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

Answer 13

Use el siguiente código en el archivo CSS

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

Es trabajo para mi Espero que te sirva

Answer 14

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

 />

Answer 15

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

en tu archivo css. ¡Funcionó para mí!