Contrainte de saisie sur champs input

Soyez le premier à donner votre avis sur cette source.

Vue 13 474 fois - Téléchargée 1 593 fois

Description

Avec ce bout de code vous pouvez imposer un type de saisie sur les champs de type input.
On peut imposer :
- only_interger : les entiers (négatif ou positif)
- only_floats : les nombres à virgules (négatif ou positif)
- only_phone_number : les numéro de téléphone (exemple : +33 02 99 ...)
- only_zip_code : les codes postaux français
- only email : un email du type nom@domaine.ext
- only_alpha_num : les lettres et les chiffres
- only_alpha : les lettres
- only_hex : les chiffres hexdécimaux (0->9 et A->F)
- only_oct : les chiffres octal (0->7)
- only_from_list : uniquement les valeurs présentes dans une liste fourni dans l'attribut "list" de la balise input

Ce code n'a été testé qu'avec Firefox 10.
Une démo est visible ici : http://www.coopmcs.com/demo/input_contrainte/demo.html

Source / Exemple :


<form>
		<div><span>Seulement un entiers</span>					<input type="text" name="int" class="only_integer" value=""/></div>
		<div><span>Seulement un nombre à virgule</span>			<input type="text" name="int" class="only_float" value=""/></div>
		<div><span>Seulement un numéro de téléphone</span>		<input type="text" name="int" class="only_phone_number" value=""/></div>
		<div><span>Seulement un code postale</span>				<input type="text" name="int" class="only_zip_code" value=""/></div>
		<div><span>Seulement email</span>						<input type="text" name="int" class="only_email" value=""/></div>
		<div><span>Seulement de l'alpha-numérique</span>		<input type="text" name="int" class="only_alpha_num" value=""/></div>
		<div><span>Seulement des lettres</span>					<input type="text" name="int" class="only_alpha" value=""/></div>
		<div><span>Seulement de l'hexadecimal</span>			<input type="text" name="int" class="only_hex" value=""/></div>
		<div><span>Seulement de l'octale</span>					<input type="text" name="int" class="only_oct" value=""/></div>
		<div><span>Seulement un element chimique</span>			<input type="text" name="int" class="only_from_list" value="" list="H,He,Li,Be,B,C,N,O,F,Ne,Na,Mg,Al,Si,P,S,Cl,Ar,K,Ca,Sc,Ti,V,Cr,Mn,Fe,Co,Ni,Cu,Zn,Ga,Ge,As,Se,Br,Kr,Rb,Sr,Y,Zr,Nb,Mo,Tc,Ru,Rh,Pd,Ag,Cd,In,Sn,Sb,Te,I,Xe,Cs,Ba,La,Ce,Pr,Nd,Pm,Sm,Eu,Gd,Tb,Dy,Ho,Er,Tm,Yb,Lu,Hf,Ta,W,Re,Os,Ir,Pt,Au,Hg,Tl,Pb,Bi,Po,At,Rn,Fr,Ra,Ac,Th,Pa,U,Np,Pu,Am,Cm,Bk,Cf,Es,Fm,Md,No,Lr,Rf,Db,Sg,Bh,Hs,Mt,Ds,Rg,Cn,Uut,Uuq,Uup,Uuh,Uus,Uuo"/></div>
	</form>

Conclusion :


C'est pas un code bien méchant mais qui peut être pratique pour certain champs de formulaire.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
35
Date d'inscription
jeudi 19 février 2004
Statut
Membre
Dernière intervention
2 février 2009

Je viens de tester la démo sous FF17, elle marche parfaitement.
Bonjour,
j'ai testé le code et ne fonctionne pas sous Firefox 17
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Bonjour,

Tu es mieux de tester la valeur de la touche entrée avant son apparition dans le champ texte plutôt qu'après. Sinon, bon travail. Fonctionne sous Safari 5.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.