docTutoriel : Javascript | Catégorie : Divers | Ecrit par Mathieusub le 16
download 
Plainte Transcription
Tutoriel : Javascript | Catégorie : Divers | Ecrit par Mathieusub le 16
Tutoriel : Javascript | Catégorie : Divers | Ecrit par Mathieusub le 16/03/2010 à 14:25:54
Lien url : http://webdezign.tutoriaux.free.fr/Tutoriaux.php?categorie=Javascript&Souscategorie=Divers&page=84
Toute reproduction totale ou partielle de ce fichier est interdit ! © 2017 Webdezign.tutoriaux.free.fr Tous droits réservés
Javascript : Décompter et limiter le nombre de caractère d
Dans ce tutoriel nous allons apprendre comment mettre en place un limiteur et décompteur du nombre de caractère
dans un champ.
Etape 1 : Ajoutez ce code entre les balises <head></head> de votre page :
<script type="text/javascript" src="formlimiterdecompter.js"></script>
Cliquez sur le lien ci-dessous pour télécharger le fichier :
http://webdezign.tutoriaux.free.fr/sources/formlimiterdecompter.js
Etape 2 : Maintenant nous allons mettre en place un formulaire avec un champ du sera limitée à 10 caratères. Code à
placer entre les balises <body></body> de votre page :
<!--Ouverture de mon formulaire nommé Exempledeformulaire-->
<form name="Exempledeformulaire">
<!--Création d'un champ nommé webdezigntutoriaux-->
<input type="text" name="webdezigntutoriaux" style="width:250px" />
<!--Affichage des données-->
<div id="webdezigntutoriaux-status"></div>
<!--Fermeture de mon formulaire-->
</form>
<script type="text/javascript">
fieldlimiter.setup({
//Récupération des données du champ
thefield: document.Exempledeformulaire.webdezigntutoriaux,
//On limite le champ à 10 caratères
maxlength: 10,
//id pour le retour des informations
statusids: ["george-status"],
//Lorsque l'on appuie sur une touche
//on vérifie si le texte n'est pas trop long
onkeypress:function(maxlength, curlength){
if (curlength<maxlength)
//Bordure du champ en gris si le nombre n'est pas dépasser
this.style.border="2px solid gray"
else
//Bordure du champ en rouge si le nombre est dépasser
this.style.border="2px solid red"
}
})
</script>
Et voilà ce tutoriel est terminé !
Page 1
