Le contenu de cet article explique comment le mini-programme gère la zone de saisie du clavier (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Sur le terminal mobile, lorsque la zone de saisie est en bas de la page, le clavier couvrira la zone de saisie. Une situation similaire se produit également dans le mini programme, mais le mini programme en fournit. API. Mais cela ne peut pas répondre à la demande. Voici une brève introduction à la solution
Le comportement par défaut de l'applet
Lorsque le clavier écrase la zone de saisie, aucune opération n'est effectuée Dans le cas de l'API, le mini programme poussera l'écran vers le haut jusqu'à ce que la zone de saisie soit juste au dessus du clavier
Autrement dit, s'il n'est pas traité, le clavier du mini programme. ne couvrira pas la zone de saisie. Mais cela ne suffit pas à mes besoins, car une partie du contenu de la page doit être affichée en continu et je ne veux pas pousser la page vers le haut.
Donc, je résoudra ces problèmes grâce à l'API du mini programme.
cursor-spacing
Dans une conception d'interface utilisateur relativement normale, il y a en fait une couche de wrapper en dehors de l'entrée boîte, et il est évident que le comportement par défaut du mini programme est inconnu, donc le résultat est La partie inférieure de cette couche de wrapper (sous la zone de saisie) sera coupée alors ce sera très moche
.Introduisez cet espacement apicurseur, définissez-le autant que vous le souhaitez et laissez-le autant que vous le souhaitez sous l'entrée. Ce nombre doit être "La distance entre le bord inférieur de la zone de saisie et la fin du wrapper". .
Le piège de l'applet est : l'unité sur le document est fausse. Il faut l'essayer pour savoir quelle est la signification de cet attribut, donc l'unité est fausse et n'a aucun effet. (la plupart) des personnes abandonnent. L'unité correcte est une chaîne avec une unité Par exemple, 10px
ou 100rpx
.
ajuster la position
Comme je l'ai mentionné tout à l'heure, je veux que la page ne remonte pas, mais pousse directement la zone de saisie vers le haut.J'ai donc essayé cette API. La valeur par défaut est vraie, définissez-la. à false. L'effet devient : lorsque l'on clique sur la zone de saisie, le clavier recouvre parfaitement la zone de saisie.J'ai donc ajouté l'espacement du curseur et j'ai constaté que ces deux API ne peuvent pas prendre effet en même temps.La conclusion finale est donc la suivante : la simple utilisation de l'API fournie ne peut pas répondre aux exigences. Vous ne pouvez donc qu'écouter les événements et le faire vous-même.SolutionIdée de boîte de saisie d'opération manuelle :
J'ai trouvé que la hauteur du clavier peut être obtenue dans l'événement bindfocus. Après avoir essayé, la hauteur du clavier est en px. Il suffit donc de définir la valeur inférieure sur la hauteur px. Si le positionnement relatif du wrapper de la zone de saisie n'est pas en bas de la page, la situation sera plus compliquée si vous utilisez L'unité est rpx Vous devez obtenir la largeur et la hauteur de l'écran pour calculer le nombre px sans problème. , vous pouvez ajuster la mise en page pour que le wrapper soit positionné par rapport au bas de la page
La zone de saisie perd immédiatement le focus après avoir changé le styleQuand cela. Cela se produit, la performance est la suivante : lorsque vous cliquez sur la zone de saisie, le wrapper de la zone de saisie clignote et revient à sa position d'origine (car il perd le focus)Après de nombreuses expériences, cela doit être fait. Ce qu'il faut, c'est lier une variable locale à l'attribut
puis utiliser wx:if pour masquer la zone de saisie selon qu'elle est focus ou non, mettre une fausse zone de saisie et modifier. l'attribut focus pour évoquer le clavier après avoir cliqué.focus
Code implémenté : https://github.com/cwj0417/step/blob/master/src/pages/did/index.vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!