Avec HTML5 on a plein de nouveaux widgets, et notamment la possibilité de définir plus de types pour les inputs. Le truc sympa par exemple, c’est qu’on peut dire :

<input type="number" />

Et là, le navigateur ne vous laisse saisir que des nombres, sans avoir à coder de JS. Mieux, les machines avec claviers virtuels (téléphones, tablettes, etc) affichent généralement un clavier spécial qui permet de saisir facilement des nombres.

Seulement dernièrement, il y a une nouvelle tendance, certains navigateurs affichent aussi des boutons pour incrémenter et décrémenter le champ.

Ça vous bousille tout votre design car c’est inconsistant selon selon les navs, et en plus ces spin buttons sont inutilisables sur mobiles car bien trop petits.

C’est quoi déjà les pas de la salsa ? Un pas en avant, un pas sur place, un pas en arrière, un pas sur place ?

Bref, j’ai d’abord essayé d’appliquer une solution CSSisante :

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
input[type=number]{
    -moz-appearance:textfield;
}

Mais bien entendu ça ne marche pas partout, partout. Ça serait trop facile.

En bon dev Web, j’ai du coup utilisé un contournement tout pourri, c’est la marque de fabrique du métier :

<input type="tel" />

Le browser considère ainsi qu’il s’agit d’un numéro de téléphone. Il check donc si c’est un numéro (ou quelques signes comme “.”, “-“, etc, mais c’est acceptable) et fait apparaitre un clavier virtuel presque similaire au clavier pour type=number.

“On s’en contentera”, la devise de notre profession.