Mobile Safari - Le curseur d'entrée ne défile pas avec le défilement à débordement: touchez
Je sais que le navigateur Safari Mobile ne sera pas déclencher des événements tout en un "momentum" (-webkit-débordement-défilement: appuyez sur;) défilement. Mais ce n'est pas tout à fait la même chose, parce que Safari gère l' (clignotant) signe d'une entrée en interne.
<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;
}
Essayer ce violon sur votre appareil (mise au point à l'entrée puis faites défiler la page): https://jsfiddle.net/gabrielmaldi/n5pgedzv
Le problème se produit également lorsque vous maintenez votre doigt appuyé (et pas uniquement au moment de donner un élan et libérer): l'accent circonflexe ne parvient pas à faire défiler.
Évidemment, je ne veux pas désactiver le dépassement de défilement, si il n'y a pas moyen de fixer le curseur afin de faire défiler correctement, il serait OK pour le cacher.
Grâce
source d'informationauteur gabrielmaldi
Vous devez vous connecter pour publier un commentaire.
C'est en effet une WebKit bug et il semble y avoir aucune solution connue.
@cvrebert déposé le bug:
Seule solution que j'ai été trouvé sur le défilement de l'événement afin de vérifier si l'entrée de type de texte est centré, définir le focus sur un autre élément (par exemple, sur le bouton). Comme résultat, le clavier virtuel et le curseur disparaît. Cette solution n'est pas parfaite, mais elle n'a pas l'air si horrible que avec les curseurs en haut du formulaire.
Exemple:
J'ai passé beaucoup de temps à essayer de comprendre cela, et n'a pas de succès avec les autres idées mentionnées ici.
Une chose que j'ai remarqué, c'est que même si le curseur de flotter en dehors de l'entrée, une fois que vous commencez à taper sur le clavier à l'écran, le curseur ne revenir dans la position correcte.
Cela m'a donné l'idée - peut-être en utilisant une partie du code JS que je puisse changer la valeur de l'entrée, puis rapidement revenir à la valeur actuelle. Peut-être que ce serait obtenir le curseur à s'aligner comme il le fait lorsque vous n'manuel de frappe.
Je l'ai testé et ça a fonctionné. Voici à quoi ressemble le code:
C'est effectivement un bug sur nouvellement libéré iOS 11.J'ai résolu le problème modaux en modifiant le css:
Eu ce même problème, mon correctif a été de modifier entre
-webkit-overflow-scrolling: touch
et
chaque fois que je focus/flou sur les intrants
Vous pouvez résoudre le problème en supprimant la sélection et le réglage de nouveau. À l'aide de jQuery ici, c'est le Javascript pour le faire. J'ai ajouter le gestionnaire d'événement lors d'entrer en mode édition:
Quand j'ai quitter le mode d'édition-je supprimer le gestionnaire d'événement:
Ce sera probablement aussi le travail si le gestionnaire d'événement est toujours activé.
Je suis en utilisant jQuery.animer pour faire défiler la fenêtre et je ne sais pas si cela fonctionnera si vous n'êtes pas à l'aide de jQuery.animer, mais il a travaillé pour moi. Je suis juste de déclenchement du "flou" des gestionnaires sur l'élément qui ne fait pas provoquer l'élément à perdre le focus, c'est juste déclenche les gestionnaires comme si elles avaient été naturellement déclenché par l'interaction de l'utilisateur. Il semble :
Due à d'autres étrangeté avec iOS je vais avoir à économiser de l'élément de l'offset().top valeur originalTop quand mon formulaire de charges. $contenu est simplement un défilement div contenant ma forme-par exemple: $('div#contenu').
Cela semble encore être semés sur webkit formes iOS avec
-webkit-overflow-scrolling:touch
également dans iOS 11. Basé sur les réponses ci-dessus, et parce qu'il prend en se concentrant uninput
outextearea
élément pour le signe d'apparaître hors de l'endroit, voici ma propre approche de la "correction" pour qu'iloù
elementSelector
points à l'élément conteneur pour les éléments d'entrée.C'était il y a longtemps et je pense qu'il a été fixé sur la IOS11.x, bien sûr, nous avons encore besoin de prendre en charge les anciennes versions, les suggestions ci-dessus m'a donné une astuce, mais aucun d'entre eux travaillaient 4 mon installation. J'ai utilisé onFocus pour déclencher un retard de fonction qui ajoute/supprime un char à l'actuel axé champ. Je suis sur un plat angularJS/iOS hybride.
sur mon html côté
sur mon JS côté, le code est
Enfin dans l'Obj-C j'ai mis le var dans le clavier pop