mobile - para - manual de programacion android pdf

¿Desplazar la página en el foco de entrada de texto para dispositivos móviles?

Question

Im haciendo un sitio optimizado para dispositivos móviles con una entrada de texto que filtra una lista a medida que escribe. Es similar a esto: http://jquerymobile.com/test/docs/lists/lists-search.html

Para los teléfonos, sería un beneficio de usabilidad si al seleccionar la entrada la página se desplaza hacia abajo para que la entrada esté en la parte superior de la página. De esta manera, gran parte de la lista a continuación sería visible mientras escribe. ¿Es esto posible y / o alguien tiene experiencia haciéndolo? Gracias

Answer 1

De acuerdo, eso sería bueno para la usabilidad.

Si usas jQuery, esto debería ser el truco:

$(''#id-of-text-input'').on(''focus'', function() {
document.body.scrollTop = $(this).offset().top;
});

Answer 2

Una mejor solución sería:

$(''#id-of-text-input'').on(''focus'', function() { document.body.scrollTop += this.getBoundingClientRect().top - 10 });

Debido a que offsetTop (o .offset().top si usa Jquery) devuelve la distancia desde el primer padre posicionado, mientras que como necesita la distancia desde la parte superior del document .

getBoundingClientRect().top devuelve la distancia entre la posición actual de la ventana gráfica y el elemento, porque si se desplaza 300 píxeles por debajo del elemento, devolverá -300 . Así que al agregar la distancia usando += se desplazaría al elemento. -10 es opcional - para permitir un poco de espacio en la parte superior.