Impedir que la página se desplace en la conmutación de foco

Question

Soy nuevo en la web móvil/dev. Mi aplicación usa jquery-mobile, phonegap y Compass (scss).

tengo un problema en mi página de entrada:

logotipo y los campos están contenidos en 'div' contenedores estándar (data-role = "contenido" de tipo de datos = "vertical"). El fondo es de color

Al cambiar el foco del campo de inicio de sesión al campo de contraseña, la página se desliza hacia arriba, que es lo que no quiero que ocurra. Me gustaría que mi logotipo y campos permanezcan en su lugar, al igual que la página de inicio de sesión de la aplicación Skype iOS.

aquí es lo que sucede:

He intentado varios trucos, tratando de bloquear los eventos de desplazamiento, o forzar a la página para desplazarse hasta 0,0, sin éxito.

Estoy pensando en una nueva estrategia ahora, tal vez utilizando el posicionamiento relativo superior para el logo y los campos, y capturando eventos de enfoque para desplazar la página yo mismo, en el teclado deslizando hacia arriba (animando las coordenadas de posición relativas superiores).

Aunque esto parece factible, me pregunto si este es el tipo de trabajo en torno utilizado por el equipo de Skype para iOS App ...

Algún consejo sobre las técnicas utilizadas en este caso particular es bienvenido!

aplausos,

Fred

Answer 1

no he probado esto, pero sí que e.preventDefault() detener el problema? En general, utiliza e.preventDefault() para detener el comportamiento predeterminado de desplazamiento/arrastre.

$(document).bind('focus', function(e){ 
    e.preventDefault(); 
}); 

o mejor

$(element).bind('focus', function(e){ 
    e.preventDefault(); 
}); 

o

$(document).bind('touchstart', function(e){ 
    e.preventDefault(); 
}); 

haría con un trabajo de campo de entrada mejor?

$(":input").live({ 
    focus: function(e) { 
    e.preventDefault(); 
    } 
}); 

Answer 2

que finalmente no tuvo éxito en la búsqueda de cualquier solución de codificación para manejar mi problema, pero me he dado cuenta de que un posicionamiento quirúrgico me permitió friso la pantalla cuando se cambia entre campos.

El espacio disponible para toda la pantalla de inicio de sesión no debe exceder el espacio disponible una vez que el teclado está visible, es decir, 200 píxeles. Además, para evitar el desplazamiento al cambiar de campo, la última posición del centro del campo de entrada no debe exceder los 100 píxeles máx. Al usar CSS, es posible jugar en margen y margen para lograr el resultado deseado.

Debería ser posible conseguir espacio vertical adicional mediante la eliminación de la "barra de navegación de los campos" del teclado, pero no sé cómo hacer que ninguno:/