Mettre le clavier virtuel en numérique

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)

Salut,

Je me demande si avec un <input type="number" /> ça ne fonctionnerait pas. À tester !

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

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)

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.

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)

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.

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)

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.

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.