1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Formulaire
  5. Contrainte de saisie sur champs input

Contrainte de saisie sur champs input

Soyez le premier à donner votre avis sur cette source.

Vue 15 688 fois - Téléchargée 1 734 fois

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
ryosama Messages postés 35 Date d'inscription jeudi 19 février 2004 Statut Membre Dernière intervention 2 février 2009
3 janv. 2013 à 09:19
Je viens de tester la démo sous FF17, elle marche parfaitement.
tolysall
2 janv. 2013 à 12:51
Bonjour,
j'ai testé le code et ne fonctionne pas sous Firefox 17
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 7
9 mars 2012 à 23:39
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.
S'inscrire maintenant

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.

Du même auteur (ryosama)