jQuery: une barre de progression pour montrer le "remplissage" d'un textarea

Souvent, les problèmes semblent faciles à résoudre, bien s'avérer la plus difficile que prévu, c'est que généralement il est de perdre la moitié de dégager une journée de travail réessayer plus ou moins orthodoxes et fiévreux sites consultations, désespéré de quelqu'un qui a déjà fait face à la problème.

Quand un projet, j'ai eu le besoin de limiter le nombre de caractères autorisé dans un textarea, je pensais que je résolus en quelques minutes, il était pas ainsi, j'ai trouvé plusieurs solutions sur le net mais pas de me convaincre à la fin, j'ai donc décidé de implémenter quelque chose en utilisant jQuery et une excellente jQueryUI , en particulier la composante de la progessbar colis.

Récupération des fichiers nécessaires

Colleghiamoci d' http://jqueryui.com/ et cliquez sur le bouton "télécharger personnalisée" en haut à droite.
Sur la page suivante, sélectionnez les composants utiles, et l'un des widgets disponibles, nous décidons de ne prendre que la barre de progression.

Nous avons choisi le modèle graphique de la liste déroulante sur la droite et cliquez sur "Télécharger". Décompressez l'archive que vous venez de télécharger et de trouver trois dossiers et un fichier à la racine:

• le dossier css contenant le thème, dans notre cas la valeur par défaut, ui-légèreté
• développement bundle contient des exemples et de documentation
• JS: contient les deux fichiers nécessaires à l'exécution de notre solution; jQuery et jquery-ui-1.4.4.min.js-1.8.9.custom.min.js
• index.html: une page qui nous permet de voir un exemple de thème / les widgets que nous avons choisi

Pour notre petit exemple va créer une structure simple comme suit:

• dossier décompressé à la jQueryUI (jquery-ui-1.8.9.custom)
• fichier.html package contenant le textarea
• file.js contenant le code jQuery

Nous créons notre fichier HTML, de lui donner un nom significatif (nous l'appellerons mrw_jquery_txtcheck.html) et d'insérer dans les inclusions balise head nécessaire: le lien avec le thème des fichiers CSS et JS jQuery et jQueryUI.

 href = "jquery-ui-1.8.9.custom/css/ui-lightness/jquery-ui-1.8.9.custom.css" <link type="text/css" rel="stylesheet" />







 <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"> </ script>







 <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"> </ script>

Ajouter le textarea dans le corps:

 



 <div> <textarea name="limitedOne" id="limitedOne" style='width:250px;height:100px;'> </ textarea> </ div>

 

Insérez ensuite le div qui contient la barre de progression et un espace réservé pour vous donner une idée de combien de caractères sont aussi numériques.

 <div style="height: id="progress" 20px;"> </ div>







 Disponible <p> <span id="charCounter"> 255 </ span> caractères. </ P>

Maintenant, nous pouvons procéder à l'écriture du code JavaScript à un fichier séparé / jQuery avec les fonctions nécessaires, ce qui alors aussi l'inclure dans la balise head, nous allons appeler check_textarea.js.
Tout d'abord définir les variables de base; caractères autorisés et ceux disponibles ont la même valeur au début:

 Max_chars = 255;







 Restant = max_chars;

Puis on définit la fonction qui contrôle et améliore ProgressBar et compteur:

 Fonction checkTextareaLength () {





  



 current_length == undefined var = $ ("# limitedOne"). val (). longueur?

 



 0: $ ("# limitedOne») Val () Longueur:..



  



 = Restante (max_chars - current_length);



	

  



 if (restant> 0) {

	

    



 $ ("# LimitedOne") ($("# LimitedOne val ») Val () chaine (0, max_chars))...;



  



 Else {}



    



 $ ("# CharCounter") HTML (restant).;



    



 var pv = Math.floor ((((max_chars-Restant) / max_chars) * 100));



    



 Progressbar $ ('# Progrès ») (« valeur », pv).;



  



 }







 }

Analysons un peu le code: la première ligne de checkTextareaLength obtient la valeur actuelle de la zone de texte en utilisant le Val function () de jQuery, puis compter le nombre de caractères entré par la lecture de l'attribut de longueur.
Sur la ligne suivante donne le nombre de caractères disponibles pour la différence. À ce point il ya deux possibilités.

1. Restant la variable est inférieure à zéro (par exemple après un copier / coller) le bloc if capte la valeur du textarea et il limite à 255 caractères en utilisant la chaîne JavaScript natif

 



 $ ("# LimitedOne") ($("# LimitedOne val ») Val () chaine (0, max_chars))...;

 

2. Restante est supérieure à zéro, sinon bloquer dans la première travée est renforcée avec le nombre de caractères restants:

 



 $ ("# CharCounter") HTML (restant).;

 

Ensuite, la fonction calcule le ratio entre le nombre maximal de caractères disponibles et ceux qui sont actuellement inclus, la fonction arrondit la bibliothèque de l'Math.floor résultat (bas) pour le plus proche:

 



 var pv = Math.floor ((((max_chars-Restant) / max_chars) * 100));

 

A ce stade nous ne pouvons assigner la valeur trouvée dans la barre de progression

 



 Progressbar $ ('# Progrès ») (« valeur », pv).;

 

Écrivons le code qui est exécuté sur le Prêt DOM.
Nous initialisons les lient ProgressBar et réaliser les événements que vous souhaitez intercepter: le keypress, le mouseout, le changement, et le flou. Surveiller tous à intercepter l'événement que l'utilisateur doit utiliser le copier / coller.
Notez que l'appel de fonction est reportée par quelques centièmes de seconde à travers le setTimeout fonction native pour être sûr d'avoir toujours la valeur au moment approprié, lorsque l'utilisateur a fini de taper.

 $ (Function () {



  



 $ ("# Progress") Progressbar ().;



  



 $ ("# LimitedOne.") Bind ("keypress changement mouseout flou", function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>