Vídeo aula

Limitando a quantidade de caracteres com Jquery

Salve Amigos do VAB, David CHC em mais uma vídeo aula de Jquery. Nessa video aula, aprenderemos a como limitar a quantidade de caracteres em um textarea usando o jquery. É algo muito simples, mais útil para utilizar em seus sistemas. Boa aula.

Jquery : http://jquery.com/

Script Criado: http://www.mxmasters.com.br/comunidade/viewtopic.php?f=54&t=2540&start=0

Jquery, keyup, limitar caracteres com jquery

Deixar um comentário

Comentários (14 Comentários)

David CHC : 05.03.10 às 8:27

@Marcio Vinicius, atualmente para desenvolvimento e programação eu uso o Komodo Edit, que é gratuito. Mas já usei o Dreamweaver, NotePad++, aptana, netbeans, entre outros. È sempre interessante vc testar pra ver que vc se adaptar melhor.
Marcio Vinicius : 04.03.10 às 23:06

Uma pergunta pra vocês.. Curiosidade apenas. Qual programa vocês usam para a criação de sites?
David CHC : 04.03.10 às 11:50

@Marcio Vinicius, a ideia principal é essa, vc adaptar as suas necessidades, perfeito.
Marcio Vinicius : 04.03.10 às 11:15

DAVID, obrigado mais uma vez! Muito bom o Video, consegui de primeira, a apenas ajuestei ele ao meu padrão e coloquei as chaves {} no if:

if(tamanho > limite){
tamanho -= 1;
}

Porque sou iniciante e fica mais facil para que eu não me perca. Muito obrigado e parabéns!
David CHC : 18.09.09 às 18:04

@Marcio, não tão complicado fazer não, é bem simples. Vou te mostrar aqui como poderá ser feito, vou colocar o html , irei apenas trocar os sinais de maior e menor para colchetes para não ser interpretado aqui no wordpress:

HTML:

[form action="" method="post"]

Nome [input name="nome" type="text" /]

E-mail [input name="email" type="text" /]

Assunto [input name="assunto" type="text" /]

Departamento [select name="departamento"]
[option value="1"]Fiscal[/option]
[option value="2"]Contabil[/option]
[option value="3"]Recursos Humanos[/option]
[/select]
Mensagem[textarea name="mensagem" cols="45" rows="5"][/textarea]
[input name="" type="submit" value="Enviar" /]
[/form]

Repare tenho um formulário simples (tenha video aula ensinando o como criar um formulário em tableless e tbm como enviar com PHP). Apenas q coloquei foi um select, onde tem as opções para onde irá ser enviada o email, se é para área fiscal, contabil, Recursos Humanos. O valor atribuido são respectivamente: 1, 2, 3. E são com esses valores que iremos trabalhar para dizer pra que email vai.
Isso é muito facil de resolver, podemos usar um switch, onde colocamos um valor, ele vai verificar o valor correspondente, e atribuir o email q equivale.

switch ($_POST['departamento']){
case 1:
$destino = ‘fiscal@empresa.com.br’;
break;

case 2:
$destino = ‘contabil@empresa.com.br’;
break;

case 3:
$destino = ‘rh@empresa.com.br’;
break;

default:
$destino = ‘padrao@empresa.com.br’;
break;

}

Explicando esse codigo:

Vc vai atribuir a variavel vindo do formulário $_POST['departamento'], ao switch, o q ele vai fazer é verificar o valor dessa variavel em relação ao valor q foi proposto, seria: case 1 , case 2, case 3. Se o valor foi igual, por exemplo, 2 (case 2), ele vai dizer q $destino = ‘contabil@empresa.com.br’;, e para a verificação quando encontra o valor q tava procurando. Caso não seje nenhum desses valores, ele vai dizer por padrão ( default) q $destino = ‘padrao@empresa.com.br’;

Agora basta usar a variavel $destino para dizer para onde irá enviar o email.
Marcio : 18.09.09 às 17:03

Olá David..cara..posso fazer um pedido?

ja fazendo rsrs..tem como vc criar uma aula sobre Combobox…

opção 1
opção 2
opção 3

escolhendo uma opção iria para um email diferente (no caso ae seriam 3 emails)…

valeu, abss.
Deivez Fahl : 05.09.09 às 13:28

Realmente muito útil… valeu !
Luis Henrique : 05.09.09 às 12:29

Ah ta blz David vou ver se acho algo sobre isso na net por q sou meio noob ainda em PHP dai fica dificil rsrsrs brigadão pela dica abraços…
David CHC : 05.09.09 às 11:18

@Tutorial City, blz então, eu fiz o código rápido, ai tinha aparecido aquele problema, e coloquei aquele if , como tinha resolvido , não tinha tentado outra solução. Mas foi ótima essa modificação, ficou bem melhor mesmo. O lance da cor, bastaria apenas colocar um class com jquery, addClass ao chegar perto do limite. vlw
Tutorial City : 05.09.09 às 10:49

@David CHC
show de bola!
Nesse caso acho IF(o primeiro) que seria legal usar o modo compacto, por causa da simplicidade.
A contagem ficava igual a -1 por que você primeiro faz o cálculo do contador e depois reduz o tamanho do texto(com substring). A solução que achei foi mover o cálculo e display do contador pra dopois do IF(o que usa substring) , além de adicionar uma nova contagem de caracteres dentro do IF(que logicamente vai ser igual a 20 nesse caso). Acho legal fazer assim por que se o usuário deixar uma tecla pressionada o contador não fica com um valor estranho(não pisca com um valor negativo absurdo).
Seria interessante também deixar o texto vermelho caso estivesse próximo do limite.
meu código ficou assim:

$(function(){

var limite = 20, tamanho, contador,txt;

$(“#msg”).keyup(function(){

tamanho = $(this).val().length;

if(tamanho > limite){
txt = $(this).val().substring(0, limite);
$(this).val(txt);
tamanho = txt.length;
}

contador = limite – tamanho;
$(“#contador”).text(contador);

});
});

Abraços
{o código HTML no forum tah errado. dá uma olhada na ID do contador.}

@Alex Rodrigues
No wordpress não é tão direto pra usar jquery(não se quiser fazer da maneira certa). Tah meio brabo aqui pra eu fazer meus tutoriais, mas eu queria fazer isso. Provavelmente um dia eu faço, mas nao posso te prometer uma data….
Leonardo Tavares : 05.09.09 às 9:58

Parabéns David, essa vídeo aula ficou Show!!
David CHC : 05.09.09 às 8:19

@Alex Rodrigues, wordpress não é muito minha praia, mas comecei a estudar ele. Omenu e submenu vc pode fazer com a minha Video Aula menu DropDown.

@Luis Henrique, vc pode fazer isso de uma maneira mais fácil com php, usando a função strip_tags, onde ele remove qualquer comando html e php. Isso é valido, pra q não tenha injetem o código html e php evitando ataques de php injection e xss.
Luis Henrique : 05.09.09 às 1:51

Muito boa a video aula como sempre xD! queria te perguntar uma coisa! Teria como bloquear certos caracteres especiais atraves desse código ou adaptando algum código tipo bloquear algumas TAGs HTML, pra evitar códigos nos comentários? Tipo no orkut se vc manda um recado com TAGs de form por exemplo ele nao mostra aquilo como código q aceite texto entendi? Tipo um textarea normal se o cara colocasse assim:

* Nome:

Apareceria os campos input neh? essa é minha dúvida se teria um jeito de evitar esses códigos? Desculpa o comentário o tamanho é q nao sei explicar em poucas palavras desde já agradesço abraços!
Alex Rodrigues - 30 anos - Campinas-sp : 05.09.09 às 0:36

Olá David CHC tudo bem, cara ótima a suas video alulas de Jquery eu estou acompanhando todas.Parábens!!

#E cara uma sugestão de video aula, se voçê puder fazer uma video aula de como implementar esse tipo de menu e sub menu que é usado no VAB em um template no wordpress seria legal.

Fui obrigado!