Maxlength em textarea com jquery

Categoria: jQuery em 23/12/2009 | 5 Opa :)

Aeeee, quanto tempo né, rsrs. Faz parte, talvez este seja o último post deste ano, (caso seja, um feliz ano novo e feliz natal a todos).

A um tempo atrás eu fiz um post sobre como limitar o tamanho de inputs com jquery. Hoje eu irei mostrar como limitar o tamanho de textareas com um simples código jquery.

Sabemos que inputs do tipo text tem a propriedade maxlength e também sabemos que textareas não tem, mas com um código jquery podemos trabalhar como se existisse maxlength em textareas.

Para fazermos isso é simples.

Precisamos de um textarea com maxlength.

<textarea maxlength="15" rows="5" cols="30" name="texto"></textarea>

Após devemos adicionar no seu javascript o seguinte código:

$("textarea[maxlength]").keypress(function(event){
	var key = event.which;

	//todas as teclas incluindo enter
	if(key >= 33 || key == 13) {
		var maxLength = $(this).attr("maxlength");
		var length = this.value.length;
		if(length >= maxLength) {
			event.preventDefault();
		}
	}
});

Exemplo:

Por hoje é só rsr. Feliz Natal a todos.

5 marcas, uhull to “Maxlength em textarea com jquery”

Franklin disse:

6 de abril de 2010 às 18:19

Fala amigão, boa função, mas falta ainda alguns ajustes. Se der espaço aceita, se copiar e colar mais que o limite aceita também.

Fiz alguns ajustes, da uma olhada:

/**
 *	 textarea_maxlength()
 *	 @abstract	Essa função atribui um limite de caracteres para o elemento tanto na digitacao quanto
 *   			quando se tenta copiar/colar. Muitas funcoes disponiveis na internet, nao preve o
 *   			bloqueio do copiar/colar.
 *
 *   @params	idEl: ID do elemento / max: Quantidade maxima de caracteres.
 *   @date 		01 Abr 2010 (nao e mentira rs)
 *	 @autor 		Franklin Javier
 **/
function textarea_maxlength(idEl, max){

	var campo = jQuery('#'+ idEl);

	campo.keypress(function(event){

		var key;
		var ie = (typeof window.ActiveXObject != 'undefined');  

		(ie) ? key = event.keyCode : key = event.which; // Se for IE (keyCode), caso contrario, (wich)  

		if(key &gt;= 33 || key == 13 || key == 32) {
			// Se ja estiver no limite de caracteres return null (preventDefault)
			var tam = this.value.length;
			(tam &gt;= max) ? event.preventDefault() : null;
		}

		window.status = campo.val().length;
	});

	// Substring no evento keyup
	campo.bind('keyup', function(event){

		var tam = this.value.length;
		if(tam &gt; max){
			campo.val(campo.val().substring(0, max));
			//setcursor(idEl,1000000,1000000);
		}
	});	

}

Abraços

Responder

Ruan Carlos disse:

7 de abril de 2010 às 8:24

Cara vlw mesmo, vou acabar criando um plugin pra isso, mas por enquanto o blog está parado (muitos outros compromissos como TCC / Concurso). Abraço

Responder
- Franklin disse:
  
  7 de abril de 2010 às 11:35
  
  Maravilha… ficara show!
  
  Abcs man!
  
  Responder

Marlucio disse:

19 de abril de 2010 às 16:00

Cara eu não consegui utilizar a sua função!
Eu ainda estou iniciando no jquery!
vc poderia me dar um exemplo da utilização dela?

Responder
- Ruan Carlos disse:
  
  19 de abril de 2010 às 16:08
  
  Olá caro Marlucio, já que está começando com jQuery agora, vale dar uma lida na documentação do jQuery.
  
  Um exemplo está nesta página, caso tenha alguma dificuldade em entender, basta dar uma olhada no código fonte desta página.
  
  Atenciosamente
  
  Responder