Ir para o conteúdo

Maxlength Em Textarea


Criado por Franklin Javier, Fev 21 2011 17:08

4 respostas neste tópico
  • Por favor, faça o login para responder

#1 Franklin Javier

Franklin Javier
  • Franklin Javier
  • Colaborador
  • 6 Revisões

Revisou 21 fevereiro 2011 - 17:08


Como todos sabem, não existe a propriedade maxlength para o elemento textarea.
Existem muitas funções disponíveis na internet que "simula" o uso desta propriedade, porem ainda não encontrei alguma que não seja falha.
Nenhuma dessas funções preveem o uso do copiar/colar e selecionar/arrastar.
Dado o fato, decidi criar um plugin em jquery para resolver esse problema.

Plugin

/**
 * Author: Franklin Javier Gonzalez
 * Date: 04/01/2010
 * Version: 1.0a
 * 
 * If you use this script, please link back to the source
 *
 * Please report any bug at contato@franklinjavier.com
 * Copyright (c) 2010 Franklin Javier http://www.franklinjavier.com
 *
 * Released under the Creative Commons Attribution 3.0 Unported License,
 * as defined here: http://creativecommons.org/licenses/by/3.0/
 *  
 */

(function($){

	jQuery.fn.textarea_maxlength = function(){

		var $this = $(this);

		$this.live('keyup keypress keydown change mouseover', function(event){

			var limit = $this.attr("maxlength") || 140,
				length = $this.val().length,
				key,
				ie = (typeof window.ActiveXObject != 'undefined'); // IE

			(ie) ? key = event.keyCode : key = event.which; // IE (keyCode), else, (wich)

			if((key >= 48 && key <= 112) || key == 13 || key == 32)
				if (length >= limit) 
					event.preventDefault();
					
			if(length > limit)	
				$this.val($this.val().substring(0, limit));

		});

	}

})(jQuery);

Codigo HTML
<textarea maxlength="10" cols="30" rows="4"></textarea>

Como usar
$("textarea").textarea_maxlength();

DEMO
http://dev.franklinj...gins/maxlength/

Espero que ajude alguém.
Abcs



#2 Paulo de Tarso F. M.

Paulo de Tarso F. M.
  • Paulo de Tarso F. M.
  • Colaborador
  • 2 Revisões
  • LocalizaçãoSão Paulo-SP

Revisou 26 fevereiro 2011 - 11:20

Franklin Javier, como maxlength não é um atributo HTML válido para tag <textarea>, é interessante incluir essa informação no próprio plugin, como um parâmetro. Alterei seu plugin adicionando esse parâmetro, veja:
jQuery( function( $ )
{
	$.fn.extend(
	{
		textarea_maxlength: function( options )
		{

			var defaults = {

				limit : 250
		
			};


			options = $.extend( defaults, options );


			$this = $( this );


			$this.live( 'keyup keypress keydown change mouseover', function( event )
			{
	
				var limit = options.limit,
					length = $this.val().length,
					key,
					ie = (typeof window.ActiveXObject != 'undefined'); // IE

				(ie) ? key = event.keyCode : key = event.which; // IE (keyCode), else, (wich)


				if((key >= 48 && key <= 112) || key == 13 || key == 32)
					if (length >= limit) 
						event.preventDefault();
							
				if(length > limit)      
					$this.val($this.val().substring(0, limit));
	
			});

		}

	});

});

Dessa forma, ao instanciar basta alterar o limit (que deixei como padrão 250):
$( 'textarea' ).textarea_maxlength( { limit: 5000 } );


Obs.:

Não adicionei os comentários informando a alteração porque eu não sei como devemos incluir os dados. Por exemplo, nesse caso, com essa pequena alteração, isso gera uma nova versão? Uma revisão? O que informar em "Version"?

Seria interessante que tivéssemos um padrão para esse tipo de documentação, no qual todos os plugins seguissem a mesma estrutura, com o objetivo de padronizar a inclusão desse tipo de informação...

#3 Édipo Costa Rebouças

Édipo Costa Rebouças
  • Édipo Costa Rebouças
  • Colaborador
  • 4 Revisões

Revisou 17 maro 2011 - 11:25

Você poderia deixar como data-maxlenght que é permitido no HTML5

#4 Franklin Javier

Franklin Javier
  • Franklin Javier
  • Colaborador
  • 6 Revisões

Revisou 27 julho 2011 - 12:10

@paulo, exatamente.

Eu nao me atentei a usar um parametro como valor do maxlength porque criei esse plugin exclusivamente para usar numa rede social que estou desenvolvendo e o maximo de cada mensagem sao 140 caracteres.

Em relacao ao comentario, inclui seu nome como adaptacao do plugin. O que voce achou?
Outra coisa, alterei o nome do plugin pq estava muito grande.

Grande abs

/**
 * Author: Franklin Javier Gonzalez
 * Date: 04/01/2010
 * Version: 1.0a
 *
 * Adapted by Paulo de Tarso - Added option to limit characters via parameter
 * 
 * If you use this script, please link back to the source
 *
 * Please report any bug at contato@franklinjavier.com
 * Copyright (c) 2010 Franklin Javier http://www.franklinjavier.com
 *
 * Released under the Creative Commons Attribution 3.0 Unported License,
 * as defined here: http://creativecommons.org/licenses/by/3.0/
 *  
 */
jQuery( function( $ )
{
        $.fn.extend(
        {
                maxlength: function( options )
                {

                        var defaults = {

                                limit : 250
                
                        },
                        options = $.extend( defaults, options ),
                        $this = $( this );


                        $this.live( 'keyup keypress keydown change mouseover', function( event )
                        {
        
                                var limit = options.limit,
                                        length = $this.val().length,
                                        key,
                                        ie = (typeof window.ActiveXObject != 'undefined'); // IE

                                (ie) ? key = event.keyCode : key = event.which; // IE (keyCode), else, (wich)


                                if((key >= 48 && key <= 112) || key == 13 || key == 32)
                                        if (length >= limit) 
                                                event.preventDefault();
                                                        
                                if(length > limit)      
                                        $this.val($this.val().substring(0, limit));
        
                        });

                }

        });

});


#5 Paulo de Tarso F. M.

Paulo de Tarso F. M.
  • Paulo de Tarso F. M.
  • Colaborador
  • 2 Revisões
  • LocalizaçãoSão Paulo-SP

Revisou 13 agosto 2011 - 00:27

Olá Franklin. A alteração do nome do plugin foi bem pertinente, e a inclusão do meu nome... Obrigado! B)

Obs.: Só agora consegui acessar o iMasters Code, não sei porque mas durante um bom tempo ele ficou fora do ar...




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)