Input number et spin buttons 5


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.

5 thoughts on “Input number et spin buttons

  • Heavy27z

    La photo de l’article m’a filé la gerbe.

    Malgré tout, j’en profite pour dire merci et bravo pour le blog. Ouais j’suis pas rancunier…

  • Stéphane

    Le comportement est plus incohérent qu’inconsistant. Sauf si les widgets sont mous, mais je ne crois pas. (Je reconnais que je n’ai pas testé sur tous les navigateurs non plus, hein.)

  • Sam Post author

    Ca faisait longtemps que j’avais pas pu le sortir celui-là.

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Des questions Python sans rapport avec l'article ? Posez-les sur IndexError.