Limitar Caracteres com Jquery

Criado por Mateus Souza em 26 de janeiro de 2009 às 18:37

Um tutorial simples, estiloso e de grande utilidade…sem rodeios vamos ao que interressa:

1º passo – Chama a jQuery

Você que sempre acompanha o meu blog já deve estar se roendo porcausa dessa etapa né…mais calma lá, lembrem-se que tem sempre gente nova na area que ainda num sabe disso:

<script src="jquery-1.3.1.min.js" type="text/javascript"></script>

Como o jQuery está com a sua nova versão(1.3) vamos utilizá-la nesse exemplo.

2º Passo - Escrevendo o script

<script type="text/javascript">
			function limitChars(texto, limite, info){
				var text = $('#'+texto).val();
				var textlength = text.length;

				if(textlength > limite)
				{
					$('#' + info).html('Você ultrapassou o limite de '+limite+' caracteres');
					$('#'+texto).val(text.subtr(0,limite));
					return false;
				}
				else
				{
					$('#' + info).html('Você ainda pode escrever mais '+ (limite - textlength) +' caracteres');
					return true;
				}
			}
			$(function(){
				$('#mensagem').keyup(function(){
					limitChars('mensagem', 20, 'info')
				})
			});
		</script>

Resumindo: criamos uma função com duas variáveis que exibe sim(if) ou não(else). Ou seja, se o usuário ultrapassar o número de caracteres estipulados (neste exemplo são 20 caracteres) o javascript retorna if dizendo que altrapassou o número máximo de caracteres. Se não o javascript retona else exibindo quantos caracteres o usuário ainda pode escrever….

3º passo – CSS e HTML
Não vamos dar ênfase a essa parte…pois são somente estilos aplicados a página:

CSS

<style type="text/css">
			body{
				background:#e8e8e8;
				font-family: Arial, Helvetica, sans-serif;
				color:#222;
			}
			a{
				color:#222;
				text-decoration: none;
			}
			#campo{
				background: #ffffff;
				margin:0 auto;
				width:500px;
				height:250px;
			}
			#titulo{
				height:32px;
				background: #ffffff url(tit.png) repeat-x;
				border: 1px solid #d07300;
			}
			h2{
				font-size:16px;
				font-weight:bold;
				text-align:center;
				color:#111;
				line-height:10px;
			}
			textarea{
				background: #ffffff url(bg.png)repeat-x;
				height:216px;
				width:489px;
				padding:5px;
				border-bottom: 1px solid #bdbcbd;
				border-left: 1px solid #bdbcbd;
				border-right: 1px solid #bdbcbd;
				border-top: none;
			}
			#info{
				font-size:12px;
				margin-top:5px;
				position:absolute;
				text-align:right;
				width:500px;
			}
		</style>

HTML
Note que foram criados duas IDs (mensagem e info) que foram usadas no javascript juntamente com o número máximo de caracteres:

<div id="campo">
	        <div id="titulo">
	        	<h2>Escreva a sua mensagem</h2>
	        </div>
			<form>
				<textarea name="mensagem" id="mensagem" ></textarea>

		</form>

		<span id="info">Não ultrapasse 20 caracteres</span>

		</div>

é isso…espero que tenham gostado.Se quiserem façam o download com o psd e tudo mais. Até a próxima.

Demonstação / Download dos Arquivos

Postado em Javascript, Tutoriais, jQuery