PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 2024 → Comment proposer le pavé numérique sur mobile ou ipad pour la saisie des champs numériques
Comment proposer le pavé numérique sur mobile ou ipad pour la saisie des champs numériques
Débuté par cjenot, 05 avr. 2021 12:33 - 9 réponses
Membre enregistré
16 messages
Posté le 05 avril 2021 - 12:33
Bonjour,
J'ai une appli webdev de gestion d'inventaires. Je souhaiterais faciliter la saisie quand sur tel mobile ou sur ipad, en particulier sur les champs numériques.
Est-ce que vous auriez une idée de génie pour afficher le clavier numérique (avec "capslog" enfoncé par défaut par exemple) lors des saisies de données numériques ?
De manière plus générale, la saisie d'information sur des applis webdev en utilisation mobile est fastidieuse... connaissez vous un moyen pour passer facilement une page webdev en version mobile (avec wd mobile) ?
Merci de votre aide
Christophe
Posté le 06 avril 2021 - 09:25
Bonjour,

le clavier affiché sous mobile se base sur l'attribut type du champ input généré par webdev.
Il faudrait donc forcer le type en le passant à number avec du javascript.
J'utilise la même logique pour avoir le clavier de saisie de mail pour les champs emails.

ex : var element = document.getElementById("A2");
element.setAttribute("type","email");

A noter que j'ai fait une préconisation au ST pour qu'on ait la possibilité de forcer le type du champ input généré par webdev.
Membre enregistré
16 messages
Posté le 06 avril 2021 - 15:32
Bonjour et merci infiniment pour votre aide, cela a l'air genial.
Néanmoins est ce que vous pouvez me dire où ma modification pose problème car cela ne semble pas fonctionner :
Mon champ est une zone de saisie nommé SAI_Qte_cde, dans une zone répétée (ZR_Liste_pdt_mvt)
Je ne connais pas bien javascript, j'ai donc mis le code suivant dans la partie " Entrée de champ (onfocus)", que j'ai sélectionné en JS:

var element = document.getElementById("SAI_qte_cde");
element.setAttribute("type","number");

Cela ne génère pas d'erreur ... mais sur mobile, il y a toujours le clavier normal, non mis en numérique ;-( ... quelle tristesse ...
j'imagine que je ne l'ai pas mis au bon endroit et que le code contient une erreur ?
Merci bcp pour votre aide
Membre enregistré
948 messages
Popularité : +30 (92 votes)
Posté le 07 avril 2021 - 09:55
Coucou,

var element = Document.getElementById("SAI_qte_cde");
element.setAttribute("type","number");


document.getElementById il prend le ID du champ pas son nom.
Tu peut avoir cette information en survolant le champ concerné avec la souris dans Webdev , l'id du cham va apparaitre 'AXX

---
#lapiraterienestjamaisfinie
Posté le 07 avril 2021 - 11:45
Salut,
comme c'est dans une zone répétée il va falloir traiter tous les inputs générés par webdev dans une boucle javascript.
les champs auront un id de la forme : zrl_1_A108, zrl_2_A108, zrl_3_A108 etc.
Membre enregistré
16 messages
Posté le 07 avril 2021 - 16:48
Vraiment, Merci beaucoup pour votre aide .
J'ai testé sur un nouveau projet avec 2 champs de saisie numérique simples (pas en zone repetée) sur lequel j'ai récupéré l'ID comme convenu. et cela fonctionne ... presque parfaitement. J'ai bien le clavier numérique qui apparait. Mais quand je saisis un chiffre, il apparait dans le champ de saisie ... puis disparait quand je passe à un autre champ ... Ce bug ne se produit pas sur l'autre champ sur lequel il n'y a pas de code.
Pour info, j'ai entré le code javascript suivant dans la zone entrée de champ (navigateur).
var element = document.getElementById("A1");
element.setAttribute("type","number");

J'ai surement du faire qq chose de travers ...;-(
Pour info, quand je demande au support JDC, ils me disent que normalement , cela fonctionne naturellement en HTML 5 ... Ce qui est loin d'être le cas ..
Bonne journée à vous
Christophe
Posté le 07 avril 2021 - 16:58
Peut être un effet de bord du à un masque de saisie "webdev" placé sur le champ ?
:o
Membre enregistré
16 messages
Posté le 08 avril 2021 - 15:24
Bonjour, malheureusement non ...j'ai tout essayé...
Bonne journée, Christophe
Posté le 09 avril 2021 - 11:23
Salut, je viens de tester chez moi en passant par l'attribut inputMode.
Et sur un champ en dehors d'une zone répétée ça fonctionne bien sous chrome sous android

var element = document.getElementById("A15");
element.setAttribute("inputmode","decimal");
Membre enregistré
16 messages
Posté le 11 avril 2021 - 09:15
Oula , ca c'est vraiment très fort, bravo, cela fonctionne très bien sur les champs. Merci merci merci pour votre aide.
L'objectif est maintenant de le faire sur une Zone répétée et sur les champs de tables numériques... et là, c'est plus compliqué.
Avant de tenter une boucle (que je ne sais pas faire en js), J'ai essayé avec des ID de la forme zrl_1_A108, zrl[1]_A108 ou Zrl_3_A108 pour tester si cela fonctionnait au moins sur la 1ere et 3 ieme ligne , mais pour l'instant je n'y arrive pas. De manière générale, je ne sais pas comment récupérer en javascript le numéro de la ligne sélectionnée dans une table ou ZR (équivalent de indicencours()) et quelle est l'ID correspondant à la colonne qui est référencée en ID "A108". Merci pour votre aide précieuse