ios - Mobile Safari: la entrada de entrada no se desplaza junto con el desplazamiento por desbordamiento: toque

scroll visible

Question

Sé que Mobile Safari no activará eventos mientras esté en "momentum" (-webkit-overflow-scrolling: touch;) scrolling. Pero esto no es completamente lo mismo, porque Safari maneja la entrada (parpadeando) de una entrada internamente.

<div id="container">
    <input type="text" />
    <div class="filling"></div>
</div>

#container {
    position: absolute;
    top: 20px;
    bottom: 20px;
    width: 50%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    border: 1px solid black;
}

input {
    margin-top: 60vh;
}

.filling {
    height: 200vh;
}

Pruebe este violín en su dispositivo (enfoque la entrada y luego desplácese): https://jsfiddle.net/gabrielmaldi/n5pgedzv

El problema también ocurre cuando mantienes el dedo presionado (es decir, no solo cuando le das impulso y se suelta): el cursor no se desplaza.

Obviamente, no quiero desactivar el desplazamiento por desbordamiento, si no hay forma de arreglar el cursor para que se desplace correctamente, estaría bien ocultarlo.

Gracias

Answer 1

De hecho, es un error en iOS 11 recientemente lanzado. Resolví el problema en modal cambiando el css:

.modal {
  position:fixed;
  overflow-y: scroll;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}

body {
  height: 100%;
  width:100%;
  overflow: hidden;
  position:fixed;
}

Answer 2

De hecho, este es un error de WebKit y no parece haber ninguna solución conocida.

@cvrebert filed el error:

• WebKit: https://bugs.webkit.org/show_bug.cgi?id=138201
• Radar de Apple: http://openradar.appspot.com/18819624

Answer 3

Esto fue hace un tiempo y creo que se solucionó en IOS11.x, por supuesto, todavía necesitamos compatibilidad con versiones anteriores, las sugerencias anteriores me dieron una pista, pero ninguna de ellas funcionó en mi configuración. Utilicé onFocus para activar una función retardada que agrega / elimina un carácter al campo enfocado actual. Estoy usando un plano angular híbrido JS / iOS.

en mi lado html

... setting up my form
<div ng-repeat="item in curReading.items"  >
      <label>{{item.lbl}}</label>
      <input type="text"
       ng-model="item.value"
       class="form-control"   
       onFocus="if(tweak4IOS == 1) setTimeout(pirouette_4_IOS, 1000);"
           placeholder="Enter Title"
          />
   </div>

en mi lado JS el código relevante es

function pirouette_4_IOS()
{
  try
  {

    document.activeElement.value += ''x'';
    document.activeElement.value = document.activeElement.value.slice(0,-1);
  }
  catch(err)
  {
    alert(err.message);
  }
  finally
  {
    tweak4IOS = 0;
  }
}  // --- end of pirouette_4_IOS---
...
var tweak4IOS = 0; // init the flag

Finalmente en el Obj-C pongo la var en el teclado emergente.

- (void)keyboardDidShow:(NSNotification *)sender {
CGRect frame = [sender.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];

homeWeb.frame = CGRectMake(homeWeb.frame.origin.x, homeWeb.frame.origin.y,
                           homeWeb.frame.size.width , homeWeb.frame.size.height - frame.size.height     );

self.pinBottom2.constant = frame.origin.y;

// set the JS var so it is done only when keyboard pops initially
[homeWeb stringByEvaluatingJavaScriptFromString:@"tweak4IOS=1;"];

Answer 4

Esto todavía parece estar plagando formas de webkit en iOS con -webkit-overflow-scrolling:touch , también en iOS 11. Basado en las respuestas anteriores, y como se necesita enfocar un elemento de input o de textearea para que el cursor aparezca fuera de lugar, aquí está Mi propio enfoque "corrigiendo" por ello.

$(''input'').on("focus", function(){
    var scrollTopVal =  $(elementSelector).scrollTop();
    $(elementSelector).scrollTop(scrollTopVal + 1);
    $(elementSelector).scrollTop(scrollTopVal);
})

donde elementSelector apunta al elemento contenedor para los elementos de entrada.

Answer 5

Estoy usando jQuery.animate para desplazar la ventana y no estoy seguro de si esto funcionará si no estás usando jQuery.animate, pero funcionó para mí. Simplemente estoy activando los manejadores de "desenfoque" en el elemento que en realidad no hace que el elemento pierda el enfoque, solo activa los manejadores como si se hubieran activado naturalmente por la interacción del usuario. Parece :

$content.animate(
    {
        scrollTop: $(this).data(''originalTop'')
    }, 
    {
        duration: 100,
        easing: ''swing'',
        always: function(){
            var $t = $(this);
            $t.trigger(''blur'');
        }
    }
);

Debido a otras rarezas con iOS, tengo que guardar el valor de offset () de top del elemento como originalTop cuando se carga mi formulario. $ content es simplemente un archivo divisible que contiene mi formulario, por ejemplo: $ (''div # content'').

Answer 6

Golpeé mi cabeza contra la pared con esta en una aplicación bastante antigua de ionic / cordova.

En iOS, caret estaba en todas partes y los campos / formularios de entrada eran apenas utilizables.

Decidimos optar por WKWebView en lugar del UIWebView predeterminado en desuso desde iOS 8. ¡Y bang! Trabajando de inmediato. No olvides actualizar tu plugin de teclado también.

A partir de hoy, para nuestra aplicación ionic v1 estamos usando:

[email protected]
[email protected]

Answer 7

Pasé mucho tiempo tratando de resolver esto, y no tuve éxito con las otras ideas mencionadas aquí.

Una cosa que noté es que aunque el cursor flotaría fuera de la entrada, una vez que comience a escribir en el teclado en pantalla, el cursor regresará a la posición correcta.

Esto me dio la idea: tal vez utilizando algún código JS podría cambiar el valor de la entrada y luego cambiarlo de nuevo rápidamente al valor actual. Quizás esto haga que el cursor se alinee como lo hace cuando escribe manualmente.

Lo probé y funcionó. Así es como se ve el código:

       myIScroll.scrollToElement(element, scrollTime); // any scroll method call
       var scrollTime = 400;
       if (element.type && element.type == ''text'') {
          var currentValue = $(element).val();
          $timeout(function(){
            $(element).val(currentValue + ''a'').val(currentValue);
          }, scrollTime);
        }

Answer 8

Puede solucionar el problema eliminando la selección y configurándola de nuevo. Usando jQuery aquí está el Javascript para hacerlo. Agrego el controlador de eventos al entrar en el modo de edición:

        $(document).on(''scroll.inline-edit'', function(event) {
            var selection = window.getSelection();
            if (selection.rangeCount) {
                var range = selection.getRangeAt(0);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        });

Cuando salgo del modo de edición, elimino el controlador de eventos:

        $(document).off(''scroll.inline-edit'');

Esto probablemente también funcionará si el controlador de eventos está siempre habilitado.

Answer 9

Solo se encontró una solución alternativa: en el evento de desplazamiento para comprobar si la entrada con texto de tipo está enfocada, establecer el enfoque en algún otro elemento (por ejemplo, en el botón). Como resultado, el teclado virtual y el cursor desaparecerán. Esta solución no es perfecta, pero no se ve tan horrible como con los cursores en la parte superior del formulario. Ejemplo:

$(".scrollContainer").scroll(function () {
  var selected = $("input[type=''text'']:focus");
  if (selected.length > 0) {
      $(''#someButton'').focus();
  }
}

Answer 10

Tenía este mismo problema, mi solución estaba alterando entre

-webkit-overflow-scrolling: touch

y

-webkit-overflow-scrolling: auto

siempre que me enfoque / desenfoque en las entradas