<?=Nodashi('Grégoire ROBIN')?>

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

Tags: Informatique, jQuery

This entry was posted on Vendredi, décembre 4th, 2009 at 11:45 and is filed under Informatique, Internet, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.