jquery - Deshabilitar el desplazamiento al cambiar los elementos de formulario de enfoque aplicación web ipad

forms scroll

Question

Tengo una aplicación web. Intento desactivar / prevenir el desplazamiento que ocurre cuando te enfocas en entradas de formularios diferentes (es decir, el desplazamiento que ocurre a medida que avanzas a través de los elementos de entrada en un formulario).

Ya he desactivado el desplazamiento con esto:

 <script type="text/javascript">
     $(document).ready(function() {
         document.ontouchmove = function(e){
              e.preventDefault();
              }
     });
 </script>

Para agregar un poco más de información, tengo algunas "diapositivas" en mi página. Cada uno mide 768x1024 y están "apilados" en la página (es decir, la página es 768x3072 [1024 * 3 = 3072]) y cuando haces clic en un vínculo, uso el plugin scrollTo jquery para desplazarte a la siguiente "diapositiva" y .focus() en un elemento de entrada.

¿Alguien sabe como hacer esto?

Answer 1

Actualización sobre esto: he visto la solución window.scroll(0,0) en un par de lugares diferentes, pero parecía empeorar las cosas. Tengo varias entradas de texto en línea en mi página, así que al mover el foco entre ellas, el desplazamiento automático hacia arriba y hacia abajo en Safari hizo que la página casi no se pueda usar, especialmente en orientación horizontal.

Después de luchar con iOS 8 durante una semana, descubrí que esto detiene el desplazamiento. Esto funciona cuando se cambia el foco de un elemento a otro, ya que se necesita adjuntar el evento onblur a algo:

var moveFocus = function (blurId, focusId) {
    var blurInput = document.getElementById(blurId);
    var focusInput = document.getElementById(focusId);
    if (blurInput && focusInput) {
        blurInput.onblur = function () {
            if (focusInput.setSelectionRange && focusInput.setSelectionRange()) {
                var len = focusInput.value.length;
                focusInput.setSelectionRange(len, len);
            }
            focusInput.focus();
        };
        focusInput.focus();
    };
};

Answer 2

En caso de que esté desarrollando una aplicación web móvil con cordova, hay un complemento para eso:

El complemento que resolvió el problema para mí fue el complemento de teclado Telerik . Está utilizando el UIWebView básico. Instala el complemento

cordova plugin add ionic-plugin-keyboard

Y llama a este comando después de que cargues tu aplicación:

cordova.plugins.Keyboard.disableScroll(true);

En caso de que esté utilizando WKWebView, puede usar, por ejemplo, este complemento

Answer 3

Esto funcionó para mí (usando jQuery). Permite el desplazamiento y luego lo devuelve a la posición correcta cuando abandona la entrada.

    var saveScrollLeft;
    $("input, textarea")
        .focus(function () {
            clearTimeout(blurTimeoutId);
            saveScrollLeft = $("body").scrollLeft();
            })
        .blur(function () {
            // The user might be moving from one input to another, so we don''t want to quickly scroll on blur.  Wait a second and see if they are off all inputs.
            blurTimeoutId = setTimeout(function () {
                $(window).scrollLeft(saveScrollLeft);
                }, 1000);
        });

Answer 4

He encontrado que en UIWebView, document.body también se mueve a veces. Entonces yo uso:

    input.onfocus = function () {
        window.scrollTo(0, 0);
        document.body.scrollTop = 0;
    }

Answer 5

Ninguna de las soluciones proporcionadas funcionó para mí. Dado que el formulario que está capturando el foco (y la pantalla inicial de la página de desplazamiento a dicho formulario) está debajo del pliegue, simplemente agregué un fundido de entrada al formulario.

Entonces agrego un nombre de clase llamado fade-in , que css corresponde a display:none

usando jQuery, simplemente hago jQuery(".fade-in").fadeIn(); después de que el documento esté listo, y el problema desapareció.

Obviamente, esto no se limita a usar jQuery. Vanilla js se puede usar para el fundido.

Answer 6

Ooops, el window.scrollTo sugerido es un poco pésimo y hace que las cosas sean impredecibles.

Prueba esta mejor solución:

jQuery(''body'').bind(''focusin focus'', function(e){
  e.preventDefault();
})

O simplemente enganche su entrada:

jQuery(''input.your-input-class'').bind(''focusin focus'', function(e){
  e.preventDefault();
})

¿Por qué? Los navegadores pueden desplazar el elemento de formulario enfocado a la vista por defecto en el evento de ''enfoque'' disparado (Firefox tiene un error, por lo tanto, enganche el foco). Entonces, simplemente dígales que no lo hagan explícitamente.

Por cierto, si el evento de focus es activado por element.focus() en tu código, entonces incluso la solución anterior no sería funcional.

Entonces, una solución a eso sería reemplazar el desencadenador de focus para select , es decir,

element.select()

que no sea element.focus()

Si no le gusta el element.select() ya que select el texto dentro del elemento de entrada, intente crear un Range object del texto del elemento de entrada y colapsarlo si lo desea, lo siento por no tener tiempo para intentarlo en este momento.

Answer 7

Para evitar que el navegador se desplace al elemento al que mueve el foco, uso jQuerys one event listener. Justo antes de mover el foco al elemento, agregamos al oyente al evento de scroll y al desplazamiento del contador. El oyente del evento es eliminado por jQuery.

var oldScroll = $(window).scrollTop();

$( window ).one(''scroll'', function() {
    $(window).scrollTop( oldScroll ); //disable scroll just once
});

$(''.js-your-element'').focus();

De esta forma, me parece simple, efectivo y funciona muy bien en todas las pruebas que he hecho.

Espero que ayude a alguien.

Answer 8

Pruebe esta respuesta por BLsully. Proporcione inicialmente a todos sus elementos de entrada un atributo readonly="readonly" . Esto evitará que Mobile Safari se desplace hacia él. Elimine el atributo en el foco y agréguelo de nuevo en el desenfoque de cada elemento.

Answer 9

Si no desea que la entrada sea editable, la respuesta de kpozin funciona bien. Pero tan pronto como elimine el atributo de onfocus readonly onfocus o en el onfocus el campo de entrada se desplazará de nuevo en el enfoque.

Lo que realmente ayuda y no afecta el enfoque o la capacidad para ingresar texto es agregar onFocus="window.scrollTo(0, 0);" a los elementos de entrada.

¡Por supuesto, debe garantizar que la entrada relevante no esté cubierta por el teclado en pantalla!

Véase también esta publicación: ¿ Evitar que un elemento <input> se desplace por la pantalla en el iPhone?