android - poner - swiftkey

cuadro de texto de entrada oculto detrás del teclado en Android Chrome

Question

Tengo una página web móvil del siguiente formato:

encabezado - logotipo, etc. - posición absoluta

contenido - desplazable, posición absoluta

pie de página, 40px posición absoluta

El área de contenido tiene múltiples cuadros de entrada. En Chrome en Android, tocar en un cuadro de entrada en la parte inferior de la página hace que la entrada no esté a la vista cuando aparece el teclado virtual. La página se desplaza para intentar mover la caja hacia arriba, pero no lo suficiente para que realmente esté visible. Termina escondiéndose detrás del pie de página.

¿Algúna idea de cómo arreglar esto? Esto ocurre solo en Chrome-Android. Safari en iOS e IE en Windows Phone y otros navegadores móviles funcionan bien.

Answer 1

Cambiar el posicionamiento absoluto al posicionamiento fijo debería solucionar el problema. Las posiciones absolutas del elemento con respecto al tamaño de página inicial durante la carga de la página (al agregar un teclado se reduce la página visible). Las posiciones fijas del elemento con respecto al tamaño de página actual, manteniendo el elemento sobre el teclado.

#myElement {
  position: fixed;
  bottom: 2em;
}

Answer 2

Encontré una solución CSS que funciona muy bien.

Puede hacer una consulta CSS para una pantalla de ventana de 300 px de altura o menos, que es la altura de la pantalla en su mayoría de teléfonos con el teclado del software que se muestra. Funciona muy rápido y muy bien. Por ejemplo

@media screen and (max-height: 300px) {

    #myinputtext{
        position: absolute; 
        top: 50px;

    }
}

Answer 3

Esperaba soluciones CSS solo, pero no creo que haya ninguna. La respuesta de Gaunt Face es una buena forma de hacerlo. Desafortunadamente en mi caso, esto requeriría algunos cambios y tiene la posibilidad de romper la automatización entre otras cosas (ya que la URL tiene # objetivos agregados a ella).

Lo resolví cambiando el tipo de posición en 2 manejadores de clic.

Tengo un controlador de clics para cualquier campo de entrada / área de texto. En ese controlador de clics, cambio el estilo de posición del div del contenedor de formularios para que sea estático. Tenga en cuenta que esto empujará el pie de página hacia abajo si el campo del contenedor tiene una barra de desplazamiento. Esto, en mi caso no es un problema, ya que cuando aparece el teclado, solo se ven un par de campos. El usuario no puede ver ninguna diferencia visiblemente.

Tengo un segundo controlador para cuando el usuario hace clic fuera de un campo de entrada - controlador de clic de página - donde restauro el tipo de posición a absoluta, haciendo que la página aparezca tal como estaba antes.

Esto tiene una consecuencia involuntaria: la posición de desplazamiento se pierde. Lo arreglé obteniendo el desplazamiento del campo de entrada y llamando a scrollTop en el div principal con ese desplazamiento, restaurando así la posición.

He visto algunas preguntas sobre esto, pero no encontré una respuesta. Espero que esto ayude a alguien.

Answer 4

Hay algunas maneras en que puede resolver esto, la solución más obvia es usar javascript para establecer un hash en la URL.

Puede ver un ejemplo de eso aquí: http://jsbin.com/emumeb/24/quiet Código: http://jsbin.com/emumeb/24/edit

Para un ejemplo un poco más complejo, si tiene un encabezado y pie de página fijo, es posible que desee utilizar objetivos para cambiar el aspecto de la página cuando se establece un hash.

Dependiendo de su diseño, es posible que necesite un poco más de creatividad, puede establecer una clase en el cuerpo para el estado enfocado vs no enfocado y cambiar la UI en consecuencia, pero comienza a ser complicado mantener una buena experiencia en el móvil, el escritorio, etc.

Aquí hay un ejemplo http://jsbin.com/emumeb/30/quiet Código: http://jsbin.com/emumeb/30/edit

Obviamente, esto es algo que Chrome debe manejar solo (similar al UX iOS), así que he presentado un error en contra de Chrome - https://code.google.com/p/chromium/issues/detail?id=270018&can=4&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified .

Answer 5

No soy inteligente como ustedes, chicos

Así que tomé una regla y medí el tamaño de la pantalla de mi teléfono celular. 2nd Luego midió el tamaño del teclado

Noté que el teclado ocupaba el 38% de la pantalla.

Así que puse un div en el pie de página y lo llamé cariñosamente rana.

y usé este código:

 $(''body'').on(''focus'', ''input, textarea'', function(event) {
        var altura = $(window).height();
        var scrollp = parseInt(parseInt(altura)/100*38);
        $("#divSapo").css("height",scrollp + "px");
        window.scrollTo(0,document.body.scrollHeight);
    });

Answer 6

Si usa jQuery, puede usar los códigos de la siguiente manera:

$(''body'').on(''focusin'', ''input, textarea'', function(event) {
  if(navigator.userAgent.indexOf(''Android'') > -1 && ...){
   var scroll = $(this).offset();
   window.scrollTo(0, scroll);
 }
});

Sin embargo, el error debería resolverse ahora.

Answer 7

Usé scrollIntoView para resolver este problema.

$ (document) .on (''focus'', selector, function () {

document.querySelectorAll ("selector"). scrollIntoView ();

});