javascript - home - no me aparece el centro de control iphone

¿Evita que un elemento<input> desplace la pantalla en el iPhone?

Question

Tengo varios elementos <input type="number"> en mi página web. Estoy usando jQTouch, y estoy tratando de permanecer en pantalla completa en todo momento; es decir, el desplazamiento horizontal es malo. Cada vez que hago clic en un elemento <input> , la página se desplaza a la derecha, muestra un borde negro a la derecha de la pantalla y descentraliza todo. Las entradas están desplazadas desde la izquierda de la pantalla y comienzan en algún lugar hacia el centro de la página.

¿Cómo puedo evitar este desplazamiento en el enfoque?

Answer 1

Acabo de encontrar la solución a este problema en esta publicación.

Simplemente agregue onFocus="window.scrollTo(0, 0);" a su campo de entrada y ya está! (Lo intenté con <textarea> y <input type="text" /> en el iPad, pero estoy bastante seguro de que también funcionará en el iPhone.)

Tenía miedo de que el desplazamiento fuera visible como un parpadeo o algo así, pero afortunadamente ese no es el caso!

Answer 2

Aquí es cómo resolví esto en el iPhone (Safari móvil) (usé jQuery)

1) cree una variable global que mantenga la posición de desplazamiento actual, y que se actualice cada vez que el usuario desplace la vista

var currentScrollPosition = 0;
$(document).scroll(function(){
currentScrollPosition = $(this).scrollTop();
});

2) vincular el evento de enfoque al campo de entrada en cuestión. cuando esté enfocado, haga que el documento se desplace a la posición actual

$(".input_selector").focus(function(){
$(document).scrollTop(currentScrollPosition);
});

¡Ta Da! No molesto "scroll on focus"

Una cosa a tener en cuenta ... asegúrese de que el campo de entrada esté SOBRE el teclado, de lo contrario, ocultará el campo. Eso se puede mitigar fácilmente agregando una cláusula if.

Answer 3

Intenta esto, creo que el problema es el zoom:

<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Answer 4

Recomendaría usar el método jQuery.animate () vinculado a lo anterior , no solo window.scrollTo (0,0), ya que iOS anima las propiedades de desplazamiento de página cuando se enfoca un elemento de entrada. Es posible que llamar a window.scrollTo () solo una vez no funcione con el tiempo de esta animación nativa.

Para obtener más información, iOS está animando las propiedades pageXOffset y pageYOffset de la window . Puede hacer una verificación condicional en estas propiedades para responder si la ventana ha cambiado:

if(window.pageXOffset != 0 || window.pageYOffset != 0) {
// handle window offset here
}

Entonces, para ampliar el enlace mencionado anteriormente, este sería un ejemplo más completo:

$(''input,select'').bind(''focus'',function(e) {
$(''html, body'').animate({scrollTop:0,scrollLeft:0}, ''slow'');
});

Answer 5

Si el enfoque se establece programáticamente, esto es lo que yo haría:

Guarde el valor scollTop de la ventana antes de cambiar el enfoque. A continuación, restaure scrollTop al valor guardado inmediatamente después de establecer el enfoque.

Si usa jQuery:

var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it