1
votes

Entrée superposée du clavier virtuel dans la vue Web

Je ne suis pas sûr que quiconque puisse m'aider car j'ai ce problème avec Genero, ce que je suis assez impopulaire, mais je prendrai toute idée générale que vous pourriez avoir.

J'ai une application Web Genero qui affiche une vue Web d'une application angulaire et le problème que je rencontre est que la vue (basée sur Chrome v72) ne défile pas sous une entrée lorsqu'elle obtient le focus pour permettre à l'utilisateur de voir ce qu'il tape.

Le chargement de la page dans un navigateur fonctionne très bien et je l'ai essayé dans un webview de studio Android qui fonctionne également.

Je ne sais donc pas si c'est Genero en lui-même qui est à l'origine du problème ou peut-être une manière spécifique de rendre la vue, une configuration de navigateur différente, etc.

Toutes les idées sont les bienvenues si vous avez rencontré ce genre de problème, quel que soit le contexte, je vais tout essayer et j'aimerais éviter d'avoir à mettre un hack qui crée de l'espace sous l'entrée et de faire défiler manuellement le focus .

android angular html genero 4js

0 commentaires

4 Réponses :

0
votes

Ce qui se passe, c'est que votre taille de div ne s'adapte pas au clavier virtuel.

Je suggérerais de faire quelque chose comme ça, dans le constructeur:

private scrollTo(_index: any) {
        if (window.screen.width === 360) {
            height = document.getElementById(_index).offsetTop;
            if (height > 0) { this.scrollHeight = height; }
            else if (this.scrollHeigthElm > 0) { this.scrollHeight = 0; }
        }
} 

private setScrollHeigth(_event: any) { 
    this.scrollHeigthElm = _event.srcElement.scrollTop; 
}

Ce que cela fera est de détecter un redimensionnement, il clignotera lorsqu'un clavier apparaîtra. Ensuite, vous modifiez la hauteur à la nouvelle hauteur du div. Lorsqu'il se fermera, il se déclenchera à nouveau et lui redonnera sa taille normale.

Dans votre html:

<input id={{uniqueId}} (focus)="scrollTo(uniqueId) (scroll)="setScrollHeigth($event)" />

Attention si vous utilisez une vue enfant, assurez-vous de vérifier le nombre de pixels entourés et de faire la hauteur - pixels.

Chaque entrée doit avoir un identifiant unique:

<div [ngStyle]="'height': overflowHeight, 'overflow': 'auto'}" [scrollTop]="scrollHeight"></div>

Et puis vous faites:

const $resizeEvent = fromEvent(window, 'resize')
       .map(() => {
         return window.innerHeight;
       })
       .debounceTime(20).subscribe(data => {
          this.overflowHeight = `${data}px`;
       });

Ce que cela fait est de vérifier si votre parchemin est supérieur à zéro et de le déplacer. Et réinitialisez-le lorsque votre parchemin est à 0.

6 commentaires

Bonjour, merci d'avoir pris le temps de répondre. La taille n'est pas le seul problème, j'ai essayé un HTML simple avec beaucoup d'entrées séparées par beaucoup de sauts de ligne et l'affichage ne bougera pas même s'il a beaucoup d'espace sous l'entrée.

Donc ce que vous voulez, c'est que l'entrée défile dans la vue?

J'ai besoin d'avoir le comportement par défaut d'un agent utilisateur lorsque l'utilisateur clique sur une entrée: le navigateur doit faire défiler pour que le clavier virtuel soit sous l'entrée. Le point bonus spécial serait de pouvoir faire défiler sous l'entrée même si la page est trop petite pour cela, je verrai là-dessus quand le premier problème sera résolu :)

C'est probablement parce que vous utilisez une vue enfant. J'ai eu ce problème. Même un div interne posera des problèmes. vérifiez ma modification.

C'est difficile à suivre mais vous pouvez essayer ceci. Il remplacera les fonctionnalités qu'il offre normalement. Les choses intérieures sont une douleur, je les ai traitées de cette façon.

En y regardant de plus près et en comparant le comportement d'un navigateur à la vue Web, cela semble vraiment être un problème avec la façon dont la vue Web est gérée. Dans un navigateur, l'ouverture des claviers réduit la fenêtre à l'espace restant. Genero semble simplement ouvrir le clavier sur l'écran, il ne semble donc pas y avoir de moyen JavaScript pour résoudre ce problème.

1
votes

Assurez-vous que vous utilisez l'instruction INPUT et non DISPLAY en conjonction avec votre WEBCOMPONENT. Cela a été signalé avec Android https://4js.com/support/issue/?id = GMA-1319 mais le même principe pourrait appliquer iOS, GBC, GDC

Sinon, soulevez un cas avec votre contact d'assistance 4Js local (en supposant que vous êtes en maintenance). Dans le passé, il y a eu des cas où des travaux ont été effectués dans ce domaine https: // 4js.com/support/issue/?id=GMA-920 et il faudra peut-être apporter quelques améliorations dans ce domaine.

PS En référence à votre premier paragraphe, 4Js Genero a un modèle de support payant. Le paradoxe est que vous ne verrez pas beaucoup de questions sur 4Js Genero ici car elles doivent être répondues 1. par votre contact local d'assistance et 2. par notre forum des développeurs. Cela fonctionne alors contre nous dans les mesures de popularité des langues qui utilisent des mesures telles que le nombre de publications Stack Overflow.

1 commentaires

Bonjour, Merci pour votre temps: Sauf si nous ne parlons pas de la même chose, le composant web est déjà en mode affichage: INPUT BY NAME WC

0
votes

Eh bien, il semble que ce soit plus un problème Genero dans la façon dont il gère les vues Web, en plaçant le clavier virtuel sur le contenu Web et non à l'intérieur. Nous l'avons emmené sur leur forum et ils l'examinent.

0 commentaires

0
votes

Il s'agissait d'un problème purement Genero qui, à ma connaissance, a été résolu depuis.

0 commentaires