Comment l'applet gère-t-elle la zone de saisie de la superposition du clavier (code ci-joint)

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 :

Définissez la position de réglage sur false.
Attachez le style inférieur de l'emballage dans la zone de saisie à données locales et définissez-les sur un positionnement absolu.
Modifiez la position de la zone de saisie dans l'événement focus.
Restaurez la position du zone de saisie dans l'événement flou.
Suite à cette idée, j'ai rencontré plusieurs problèmes :

Comment déterminer la position de la zone de saisie

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 style

Quand 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é.

focusCode 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!