La prevención de una <input> elemento de desplazamiento de la pantalla en el iPhone?

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

¿Cómo puedo evitar el desplazamiento de foco?

5 Kommentare

  1. 17

    Acabo de encontrar la solución a este problema en este post Detener la página de desplazamiento de foco

    Acaba de agregar onFocus="window.scrollTo(0, 0);" a su campo de entrada y listo!
    (Probado con <textarea> y <input type="text" /> en el iPad, pero estoy bastante seguro de que va a funcionar en el iPhone también.)

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

    • solución perfecta – probado en iPod5 iOS7!
    • Esto parece que debería funcionar, pero no funciona para mí en un iPhone 5S con iOS 8 en Safari. event.preventDefault() en combinación con la solución parece que sería definitivamente el trabajo, pero sigo teniendo el defecto comportamiento de desplazamiento.
    • no funciona en iPhone5 iOS10 córdoba 7.1.0 comprobar cacheflowes respuesta.
  2. 7

    aquí es cómo lo resuelto en el iPhone (mobile Safari) (he usado jQuery)

    1) crear una variable global que contiene la posición de desplazamiento actual, y que se actualiza cada vez que el usuario se desplaza por la ventanilla

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

    2) se unen al evento de selección para el campo de entrada en cuestión. cuando está centrado, tener el documento de desplazamiento a la posición actual

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

    Ta Da! No molesta «desplazamiento de foco»

    Una cosa a tener en cuenta…asegúrese de que el campo de entrada está por ENCIMA del teclado, de lo contrario va a ocultar el campo. Que fácilmente puede ser mitigado mediante la adición de un si-cláusula.

  3. 3

    Yo recomiendo usar el jQuery.animate() método vinculado anteriormente, no sólo de la ventana.desplázate(0,0), desde iOS anima el desplazamiento de página de propiedades cuando una entrada es un elemento centrado. Llamando a la ventana.desplázate() sólo una vez puede que no funcione con el tiempo de este nativo de animación.

    Para más antecedentes, iOS es la animación de la pageXOffset y pageYOffset propiedades de window. Usted puede hacer un condicional comprobar estas propiedades para responder si la ventana ha cambiado:

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

    Así, para expandirse en el enlace antes mencionado, este sería un ejemplo más completo:

    $('input,select').bind('focus',function(e) { 
      $('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow'); 
    });
    • confirmar la configuración de la scrollTop no funciona, la animación con un tiempo mínimo de 1 mseg hizo. animación con 0 milisegundos no – probablemente necesita ser añadido a un evento de la cola o algo
    • cualquier solución a los saltos en el comportamiento? Se ve terrible cuando se desplaza la página hacia arriba y, a continuación, se pliega de nuevo. preventDefault() no ayuda
  4. 0

    Si el foco se establece mediante programación, esto es lo que yo haría:

    Guardar de la ventana scollTop valor antes de cambiar el foco. A continuación, restaurar la scrollTop en el valor guardado inmediatamente después de ajustar el enfoque.

    Si el uso de jQuery:

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

    Probar 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;" />
    • Esta es una solución real, la adición de <meta name=»viewport» content=»width=500.0, user-scalable=0.0″/> a mi página fija el desplazamiento.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea