Discussion :

[guigui69]

Bonjour à tous,

j'ai plusieurs champs input et je ne voudrais autoriser uniquement les 1 ou 0 dans ces champs.

Comment je pourrais mettre ca en place au niveau javascript?



Merci d'avance pour votre aide

guigui69

[SpaceFrog]

il me semble que c'est implémenté en html5

sinon en js tu peux limiter sur le keydown tester le keycode et n'autoriser que les keycode de 1 ou 0

sinon c'est le role des checkboxes ...

[SylvainPV]

sinon c'est le role des checkboxes ...

http://jsfiddle.net/pMLBa/

[Kaamo]

Genre tout en css !

EN fait, je pense que le besoin de guigui69 est d'avoir des input contenant des nombres en binaire je pense. Donc des input qui n'acceptent que des 0 ou des 1

Solutions qui me viennent :

sinon en js tu peux limiter sur le keydown tester le keycode et n'autoriser que les keycode de 1 ou 0

- input type number
- attribut pattern ?

[SylvainPV]

J'y ai pensé à l'attribut pattern, ou à input number min="0" max="1" ; mais le problème c'est que ça n'empêche pas la saisie, ça se contente d'indiquer que la valeur du champ ne correspond pas à celle attendue.

[cadoudal56]

Deux solutions à mon avis :

Lors de la soumission du formulaire tu vérifies la valeur saisie et si cette dernière n'est ni 0 ni 1, tu envoi un message d'alerte et tu interromps la soumission du formulaire...

Lors de la soumission du formulaire tu vérifies si le champ correspond à une des valeurs (0 ou 1). Si tel n'est pas le cas, tu lui donnes l'autre valeur...

Cependant, tu dois avoir une bonne raison de vouloir utiliser un champ texte, mais ce sera plus simple avec des boutons radios....

@+
Cadoudal56

[Kaamo]

En effet, du coup, la solution de SpaceFrog semble mieux : http://jsfiddle.net/nh5qR/

[SylvainPV]

Oui sauf que l'on peut rentrer 101, 10001, 10101010. De même qu'on peut copier coller tout et n'importe quoi à l'intérieur du champ sans déclencher un keypress.
Une checkbox déguisée est plus sûre, plus pratique et ne nécessite pas de JavaScript : http://jsfiddle.net/9aJDc/56/

[Kaamo]

Bien sûr faut ajouter le keyup, le blur etc .. C'était juste à titre d'exemple

[guigui69]

Merci pour vos réponse.

J'ai oublié (et je doit pas être dans la bonne section) mais j'utilise Jquery. Il y peut etre une fonctionnalité présent dans jquery pour faire cela

guigui69

[Bovino]

Ce que tu as surtout oublié, c'est de dire si les réponses données t'ont permis de régler ton problème...
Si ce n'est pas le cas, que te manque-t-il ?
Enfin bref, un retour sur les réponses données quoi...

[guigui69]

Bonsoir,

Je suis entrain de regarder et comprendre le script que propose kaamo:
http://jsfiddle.net/nh5qR/


je test et je reviens

guigui69

[Watilin]

Un autre problème d'annuler le keypress c'est que ça bloque les raccourcis claviers. Ça altère le comportement du navigateur, et déroute l'utilisateur : à éviter donc.

Plutôt qu'un preventDefault brutal, si j'avais à faire ça en passant par un input texte, je pencherais plutôt par une solution qui rectifie la value juste après la frappe. Ou bien qui se contente de signaler à l'utilisateur que ce qu'il a saisi est invalide. En termes d'accessibilité, ça me paraît le mieux.

[Kaamo]

keypress, keyup et blur pour bien couvrir tous les cas ?

En effet, oublier le preventDefault est une bonne idée

[SylvainPV]

Rectifier une valeur après saisie, je pense que c'est une mauvaise méthode. Détourner ou altérer le comportement par défaut de l'input ne devrait être envisagé qu'en dernier recours, lorsque les standards ne suffisent pas.

Pensons sémantique, accessibilité et cohérence avec le modèle de données en amont : pourquoi je veux que l'utilisateur rentre 0 ou 1
Option 1 : c'est un booléen, un vrai ou faux une checkbox déguisée
Option 2 : c'est un nombre entier allant de 0 minimum à 1 maximum :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="number" value="0" min="0" max="1">

ou

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="range" value="0" min="0" max="1"/>

Option 3 : c'est un texte qui pour une certaine raison ne peut prendre que la valeur "0" ou "1" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" pattern="[0-1]"/>

pour les questions de support, il existe des polyfills qui font des merveilles