samsung - Deshabilita las superposiciones de entrada del navegador de Android?

superposición de pantalla samsung j7

Question

Tengo una página web con algunas entradas de texto. El navegador de Android (al menos en Android 2.3.4, que es todo lo que tengo ahora) parece superponer su propio control sobre la entrada en la página de enfoque.

El problema es que el control superpuesto es un rectángulo blanco y se ve feo. ¿Hay alguna manera de deshabilitarlo o darle un estilo de alguna manera?

ACTUALIZAR:

Aquí hay un ejemplo del emulador de Android:

Las esquinas redondeadas y el fondo se pierden. En el dispositivo real, ni siquiera veo un borde alrededor del control.

Probablemente debería mencionar que estoy usando jQuery Mobile. Mi dispositivo de prueba es un HTC Evo 4G.

Preguntas relacionadas:

La entrada tiene un estilo diferente en el enfoque

Los elementos de entrada en WebViews siempre tienen el mismo estilo si están resaltados en dispositivos HTC

Answer 1

@czuendorf, 13 de mayo a las 13:53: Trabajó para mí también (también Android 4.0).

Sin embargo ... si usa una entrada con tipo = "número", entonces el teclado numérico ya no aparece cuando ingresa al campo, pero en su lugar se muestra el teclado normal.

Si elimina -webkit-user-modify, se muestra nuevamente el teclado derecho, pero el elemento de entrada se muestra con un borde mientras se está editando. En mi caso, la superposición de entrada estropeó el diseño (movió un poco de contenido hacia abajo y hacia la derecha), pero esto ya no ocurre con este nuevo código CSS.

Answer 2

Aquí está mi código:

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

Answer 3

Confirmo el análisis macnerd del parche czuendorf. Estos comportamientos varían ampliamente de una versión de Android a otra. Lo probé en un dispositivo Htc real con Android 4.0.3 y el esquema desapareció (¡genial!) Pero abre algunos problemas serios con el teclado (veo que la única pulsación de tecla no se muestra en el campo, y otros comportamientos extraños ...) . En el emulador no ocurre ningún problema con el teclado. No he encontrado ninguna solución para el dispositivo real. ¡Es una pena!

Answer 4

El siguiente código eliminará el resaltado de tap - [Android 4.0.3]

input{
   -webkit-user-modify: read-write-plaintext-only;
   -webkit-tap-highlight-color:#3072af;
}

Answer 5

Finalmente, resolví este problema para dispositivos Android 2.3.

No es posible quitar realmente la superposición, pero es posible mover la superposición fuera de la ventana gráfica.

La superposición intenta posicionarse en la misma posición que el campo de entrada. Copia el ancho y el desplazamiento de posición que asigna con

position:relative

y

top:-10000px

Pero la superposición no copia los desplazamientos de posición que se asignan a través de

-webkit-transform: translate3d()

Esto causa varios problemas con bibliotecas JS como iScroll.

Pero esto también nos ayuda a ocultar la superposición:

input[type="password"], input[type="text"]{
  position:relative;
  top:-10000px;
  -webkit-transform: translate3d(0, 10000px, 0);
}

Coloca el campo de entrada fuera de la ventana gráfica. La superposición se coloca a su lado. Ahora usa translate3d () para moverlo a la posición anterior.

Utilizamos esta solución ya en nuestro marco web móvil "qooxdoo Mobile": http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform

Answer 6

No estoy seguro de si esta es una solución y respuesta, pero mis entradas empezaron a reproducirse en Android después de comentarlas, lo que causó estragos en mis entradas de texto de Android (HTC2.3) y seleccionó

/* really bad */
-webkit-backface-visibility: hidden; 

/* your normal bad */
-webkit-transform: rotateY(0deg); 
-moz-transform: rotateY(0deg); 
transform: rotateY(0deg);

Si desea modificar las entradas predeterminadas, las estoy usando:

/* native placeholder styling */    
::-webkit-input-placeholder {
    color:#555555;  
    }
:-moz-placeholder {
    color:#555555;  
    }   
.inField label {
    color:#555555;
    cursor: text;   
} 

Después de comentar los primeros webkits, Android funciona bien para mí. Sin embargo, estoy anulando muchas otras cosas.

También echa un vistazo a la captura de pantalla a continuación:

Lo que hice con mis entradas es crear una vista de lista, poner todas mis entradas en elementos de la lista y quitar todas las entradas-JQM-CSS. Esto debería darte una entrada transparente sobre un elemento de la lista, que creo que se ve muy bien. También puede agregar etiquetas a las entradas, mi ejemplo está configurado para trabajar con el complemento de etiqueta inField, por lo que ya tiene todas estas clases a bordo.

La captura de pantalla es de mi HTC 2.3.5 Android y muestra un tipo de entrada = "buscar". Es un filtro de búsqueda de lista, que eliminé de la mayoría de JQM-css. Lo eliminé de la vista de lista más abajo, lo coloqué en mi lista de formularios, agregué una etiqueta (no puedo ver si estaba activo) y eliminé todo el CSS, incluidos los íconos.

Aquí hay un ejemplo de cómo estoy haciendo mis listas de formularios:

 <ul data-role="listview" data-inset="true" class="inputList">
    <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-top" data-theme="c">
        <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
        <label for="item">item</label>
        <input type="text" name="item" id="item" />
        </div></div>
     </li>
     <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-bottom" data-theme="c">
        <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
        <label for="item2">item2</label>
        <input type="text" name="item2" id="item2" />
        </div></div>
     </li>
  </ul> 

CSS:

.inputList li div.ui-btn-inner {
    background: none;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    }
 .inputList label {
    margin: 3px 0 0 !important;
    }
 // styling of text inputs! 
 .inputList input.ui-input-text, .inputList textarea.ui-input-text {
    width: 93%; 
    margin-left: 1%;
    padding: 0.6em 0;   
    text-indent: 80px; /* hard-coded - doesn''t work on Android */
    border-width: 0px;
    background: transparent;    
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;   
    -moz-border-radius:0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px;
    }
.inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner {
    padding: 0px !important;    
    }
// labels, from inField label plugin, but not active
.inField { 
    position:relative 
    }
.inField label { 
    line-height: 2.25em;
    vertical-align: middle;
    position:absolute; 
    left:8pt;
    width: inherit !important;  
    }

Espero que esto sea todo CSS. Si intentas configurar esto y parece horrible, házmelo saber.

Trabajar así se ve muy bien en mi HTC 2.3.4 Mi CSS aún necesita un poco de pulido. Necesito disminuir el ancho de las entradas y alinear: centrar, para que los bordes del elemento de la lista a continuación permanezcan visibles.

Aparte de eso, esta sería una buena solución para las entradas de Android crummy. Simplemente quite todos los JQM-CSS y coloque un listview-li detrás.

Answer 7

Solo estoy adivinando aquí, y probablemente ya lo has intentado, pero

-webkit-appearance: none;

puede hacer el truco. Ni siquiera tengo un dispositivo Android, pero en el iPhone soluciona la mayoría de los problemas de estilo relacionados con la entrada, ya que elimina por completo el estilo del navegador predeterminado. Vale la pena intentarlo de todos modos!

Answer 8

-webkit-user-modify: read-write-plaintext-only;

-webkit-tap-highlight-color: rgba (0,0,0,0); estilo de esquema: ninguno;

Esto funcionará bien en Android 4.0, pero cuando utilizas este código para el campo de entrada numérica no admite bcoz de lectura-escritura-solo-texto-claro, recibí este problema, por favor, cualquiera sugiera.