Mettre le clavier virtuel en numérique

Des livres incontournables pour tout maîtriser

Auteur
Lau06	# 21 Jan 2012, 16:48:33
8 Posts	Bonjour à tous, Sur mon site j'ai un concours de calcul mental, où l'utilisateur doit rentrer une dizaine de résultats. Sur un ordinateur, pas de problème, mais sur une tablette, l'utilisateur doit à chaque case appuyer sur une touche pour mettre le clavier en numérique, ce qui est fastidieux et perd du temps. Savez-vous s'il est possible dans ma page web (en css ou autre) d'indiquer à la tablette qu'elle doit se mettre en clavier virtuel numérique ? Merci pour votre aide , Laurent Modifié par Lau06 (21 Jan 2012 - 19:10)
8 Posts
Vincent Valentin	# 21 Jan 2012, 18:51:59
113 Posts	Salut, Je me demande si avec un <input type="number" /> ça ne fonctionnerait pas. À tester ! Vincent Valentin Développeur Web client
113 Posts
Lau06	# 21 Jan 2012, 19:02:42
8 Posts	Je teste ça demain sur une des pages du concours: http://www.math-exercises-for-kids.com/competition/cup-addition-6-7-easy.php Merci
8 Posts
Lau06	# 22 Jan 2012, 10:31:03
8 Posts	Super ça fonctionne sur mon samsung Galaxy S2, le clavier se met directement en numérique, mercredi j'essaie sur une tablette ipad. J'ai vérifié si ça n'avait pas créé de problème sur Firefox et IE, pas de problème ; par contre chrome me met des petits "ascenceurs" à droite des cases, pas très esthétique, je ne sais pas s'il y a un moyen de les enlever. http://www.math-exercises-for-kids.com/competition/cup-addition-6-7-easy.php Je crois que je vais laisser les ascenceurs ; apparemment chrome prend en compte l'attribut size pour du texte mais pas pour un nombre, y a-t-il une astuce pour régler leur taille ? Merci beaucoup pour l'aide. Laurent Modifié par Lau06 (22 Jan 2012 - 13:38)
8 Posts
Vincent Valentin	# 22 Jan 2012, 19:27:55
113 Posts	Si tu ajoutes à ta CSS ce code tu ne devrais plus avoir le comportement par défaut sous Webkit : `input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;}` Tu peux également y ajouter une règle pour gérer la largeur de tes champs si tu le souhaites. Vincent Valentin Développeur Web client
113 Posts
Lau06	# 22 Jan 2012, 20:03:55
8 Posts	Merci beaucoup, ça fonctionne parfaitement , l'ascenceur a disparu. la règle à rajouter pour la largeur des champs, c'est size : 4; ? ou width: 16px; ? ça n'a pas l'air de fonctionner... Modifié par Lau06 (22 Jan 2012 - 20:44)
8 Posts
Vincent Valentin	# 22 Jan 2012, 22:11:13
113 Posts	Avec une règle CSS tout simple du style width: 40px; tu devrais t’y retrouver (je viens de tester). Et en passant, je te confirme que ça roule sous iOS. Vincent Valentin Développeur Web client
113 Posts
Lau06	# 23 Jan 2012, 07:00:06
8 Posts	J'avais mis le width dans la règle précédente, au lieu de recréer input[type=number] ça fonctionne parfaitement maintenant. Je te dois une fière chandelle, merci encore pour ton aide précieuse. Modifié par Lau06 (23 Jan 2012 - 07:00)
8 Posts
Lau06	# 25 Jan 2012, 10:11:24
8 Posts	Je me suis aperçu que dans la plupart de mes pages d'exercices par exemple http://www.math-exercises-for-kids.com/subtraction/practice-subtraction-9.htm la balise où l'élève saisit le résultat, j'indique aussi "great" ou "wrong" si l'enfant a gagné ou perdu avec une instruction du genre : document.lire.nombre.value="Great !"; avec l'input number pas de problème pour IE, firefox ou android pour le galaxy S2, mais pour chrome et Safari l'affichage Great ou Wrong ne se fait plus. Y aurait-il une astuce pour forcer ces deux navigateurs à écrire ces mots ? sinon je vais réfléchir à une autre solution pour écrire ces mots à un autre endroit de la page.
8 Posts
Lau06	# 26 Jan 2012, 17:20:37
8 Posts	J'ai résolu le problème en le contournant, j'afficherai Great ou wrong sur le bouton check, qui se transformera en Great ou wrong.
8 Posts
Prévenir un modérateur