Plugin jQuery : maxLength sur textarea

Voici un petit plugin pour jquery que j’ai développé pour vérifier la saisie des textarea. Comme l’attribut maxlength n’existe pas sur les textarea j’ai crée ce plugin pour forcer mes utilisateurs à ne pas faire de bêtise.

Voici le code

/**
 * Plugin maxlength for textarea
 *
 * @author Grégoire ROBIN
 * @copyright http://www.nodashi.com under CC3
 */
jQuery.fn.maxlength = function(){

	function updateCptTextarea(textarea){			

		var length 		= $(textarea).attr('value').length;
		var maxLength 	= $(textarea).attr('maxlength');

		$(textarea).next('.cpttextarea').html('<small ' + ((length > maxLength)?'style="color: #CC0000;"':'') + '>Taille de la saisie : ' + length + '/' + maxLength + '</small>');
	}

	$("textarea[maxlength]").bind('blur', function(){

		var maxLength 	= $(this).attr('maxlength');
		var length 		= $(this).attr('value').length;

		if(length > maxLength) {
			alert('Votre saisie est trop longue, elle a été coupée à la taille maximum autorisée.');
			$(this).attr('value', $(this).attr('value').substring(0, maxLength));
		}

		updateCptTextarea(this);
	});

	$("textarea[maxlength]").keypress(function(event){

		var key 		= event.which;
		var maxLength 	= $(this).attr('maxlength');
		var length 		= $(this).attr('value').length;

		if(key >= 33 || key == 13) {
			if(length >= maxLength) {
				event.preventDefault();
			}
		}

		updateCptTextarea(this);
	});

	$("textarea[maxlength]").keyup(function(event){
		updateCptTextarea(this);
	});

	$("textarea[maxlength]").each(function(i){

		var maxLength 	= $(this).attr('maxlength');
		var length 		= $(this).attr('value').length;

		$(this).after('<div class="cpttextarea"></div>');
		updateCptTextarea(this);
	})
}

L’utilisation est simple :

$(document).ready(function(){
    $('textarea').maxlength();
});

Il suffit juste de spécifier l’attribut « maxlenght » sur le textarea

Voilou ;)

Sur le même sujet

• Les derniers iPhone n’ont pas explosé
• Monter des ISO sous windows sans Deamon Tools