Bem, neste artigo mostraremos como aplicar um contador e limitador de caracteres para o componente TextBox, onde a cada caractere digitado irá informar quantos ainda faltam para atingir o limite e depois que atingido não permite digitar mais.
Montando o layout
Com a sua aplicação já criada, coloque um TextBox e logo abaixo coloque a seguinte frase:
Faltam ainda 99 caracteres.
Depois vá para o código .aspx da sua página, e procure o número da frase acima (esse número pode ser quanto a sua necessidade) e o substitua pelo seguinte código HTML:
Aproveitando, dentro da tag do componente TextBox, coloque o código HTML abaixo, o evento onkeyup, evento acionado depois que clicar e voltar qualquer tecla do teclado.
Caso seja necessário colocar a mesma função em outro evento, sinta-se a vontade. Ex.: onmousemove, evento quando passar o mouse sobre o TextBox.
Veja a figura 01 como que fica o código .aspx.
Figura 01: Codigo .aspx
Escrevendo a Função
Agora vamos criar a função JavaScript, para contar e limitar os caracteres. Abra o bloco de notas e salve dentro do diretório do projeto com o nome de Funcoes.js, arquivo responsável por armazenar todas as funções JavaScript do seu projeto. É uma maneira de deixar seus códigos mais organizados.
Feito isso, copie a função abaixo e salve:
Linha 3 , aplica na variável, a subtração do número máximo pela quantidade de caracteres que já possui no TextBox, resultando no número de caracteres que ainda faltam para chegar no máximo.
Linha 4, escrever na tag SPAN, o resultado.
Linha 5, verifica se número de caracteres que já tem no TextBox é maior ou igual ao número máximo permitido.
Se for verdadeira a condição, na linha 7, escreve no TextBox somente os caracteres que não ultrapassam o número máximo, caso passa da quantidade, apaga-se todos os caracteres a partir desse. E na linha 8, escreve na tag SPAN, o número zero.
Agora vá novamente no código .aspx da sua página e dentro da tag , localizada no início do código, coloque o script abaixo, responsável por linka a página com o arquivo das funções.
Feito tudo isso, compilando o resultado é de acordo com a figura 2.
Figura 02: Resultado
Caso tenha mais de um TextBox por página para realizar esse procedimento, faça tudo da mesma maneira, mas só substitui o id do TextBox e do SPAN, por outro qualquer e coloque-os na função do evento.
Ex:
Montando o layout
Com a sua aplicação já criada, coloque um TextBox e logo abaixo coloque a seguinte frase:
Faltam ainda 99 caracteres.
Depois vá para o código .aspx da sua página, e procure o número da frase acima (esse número pode ser quanto a sua necessidade) e o substitua pelo seguinte código HTML:
99É nessa tag span é que vai mostrar o número de caracteres que faltam.Aproveitando, dentro da tag do componente TextBox, coloque o código HTML abaixo, o evento onkeyup, evento acionado depois que clicar e voltar qualquer tecla do teclado.
onkeyup="LimitarCaracter(TextBox1, ContaCaractere,'99');"Então, quando soltar qualquer tecla, será acionado o evento e executará a função “LimitarCaracter”, passando alguns parâmetros, como por exemplo: “TextBox1” id do TextBox, “ContaCaractere” id do SPAN e “99”, número máximo de caracteres e esse número tenque ser o mesmo a do SPAN.Caso seja necessário colocar a mesma função em outro evento, sinta-se a vontade. Ex.: onmousemove, evento quando passar o mouse sobre o TextBox.
Veja a figura 01 como que fica o código .aspx.
Figura 01: Codigo .aspx
Escrevendo a Função
Agora vamos criar a função JavaScript, para contar e limitar os caracteres. Abra o bloco de notas e salve dentro do diretório do projeto com o nome de Funcoes.js, arquivo responsável por armazenar todas as funções JavaScript do seu projeto. É uma maneira de deixar seus códigos mais organizados.
Feito isso, copie a função abaixo e salve:
function LimitarCaracter(idCampo, idContador, TamMax)Na linha 1, é declarado a função com o mesmo nome que foi definido no evento do TextBox, com as respectivas variáveis.
{
Caracteres = TamMax - document.getElementById(idCampo).value.length;
document.getElementById(idContador).innerHTML = Caracteres;
if(document.getElementById(idCampo).value.length >= TamMax)
{
document.getElementById(idCampo).value = document.getElementById(idCampo).value.substring(0, TamMax);
document.getElementById(idContador).innerHTML = "0";
}
}
Linha 3 , aplica na variável, a subtração do número máximo pela quantidade de caracteres que já possui no TextBox, resultando no número de caracteres que ainda faltam para chegar no máximo.
Linha 4, escrever na tag SPAN, o resultado.
Linha 5, verifica se número de caracteres que já tem no TextBox é maior ou igual ao número máximo permitido.
Se for verdadeira a condição, na linha 7, escreve no TextBox somente os caracteres que não ultrapassam o número máximo, caso passa da quantidade, apaga-se todos os caracteres a partir desse. E na linha 8, escreve na tag SPAN, o número zero.
Agora vá novamente no código .aspx da sua página e dentro da tag , localizada no início do código, coloque o script abaixo, responsável por linka a página com o arquivo das funções.
Feito tudo isso, compilando o resultado é de acordo com a figura 2.
Figura 02: Resultado
Caso tenha mais de um TextBox por página para realizar esse procedimento, faça tudo da mesma maneira, mas só substitui o id do TextBox e do SPAN, por outro qualquer e coloque-os na função do evento.
Ex:
onkeyup="LimitarCaracter(TextBox2, ContaCaractere2,'999');"Um abraço e até o próximo post. Obrigado.
