O TexBox é um dos controles de digitação mais utilizados. Ele possui três formatos para digitação de dados que podem ser configurados pela propriedade TextMode:
-
SingleLine: Permite digitação em uma única linha
-
MultiLine: Permite digitação em múltiplas linhas
-
Password: Permite digitação em formato senha. Oculto por caracter (por exemplo: “*”)
Os TextModes SingleLine e Password permitem a limitação da quantidade de caracteres digitados através da propriedade MaxLength. Porém no modo MultiLine está propriedade é desconsiderada.
Para entendermos o porquê deste comportamento, basta lembrarmos que ao executar uma aplicação ASP.NET os WebControls são processados e o resultado gerado nada mais é que o bom e velho HTML. Consequentemente, nosso TextBox MultiLine gera o controle “textarea” do HTML, que não possui propriedade para limitação da quantidade de caracteres digitados.
Para que possamos solucionar este problema, mostrarei uma maneira de limitar os caracteres digitados utilizando a ajuda do Java Script.
Seguiremos os seguintes passos:
1 - Crie um Webform conforme especificações abaixo:
Webform contendo TextBox MultiLine
Veja parte do código fonte do Webform:
...
<asp:TextBox ID="TextBox1" runat="server" Height="87px" TextMode="MultiLine" Width="267px"></asp:TextBox>
<br />
Caracteres restantes: <span id="contador">100</span>. (Máximo de Caracteres: 100)
...
Vejamos que o código acima é composto somente por um TextBox em modo MultiLine e adicionamente um "span" que chamado "contador" que utilizarei para exibir a quantidade restante de caracteres a sesem digitados.
2 - Crie uma função Java Script chamada "limitarTexto" em seu Webform, que terá como parâmentros: campo (TextBox), contador (span), númeroLimite (quantidade de caractéres máximo). Conforme código a seguir:
...
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function limitarTexto(campo, contador, numeroLimite) {
if (campo.value.length > numeroLimite) {
campo.value = campo.value.substring(0, numeroLimite);
}
else {
contador.innerHTML = numeroLimite - campo.value.length;
}
}
</script>
</head>
...
3 - O terceiro e último passo é associar a função "limitarTexto" ao controle TextBox1. Para isso precisaremos implementar o evento Load do Webform. Adicionaremos os atributos "onkeypress" e "onkeyup" ao TextBox para chamar a função. Veja a implementação abaixo:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
TextBox1.Attributes.Add("onkeypress", "limitarTexto(this, contador, 100);");
TextBox1.Attributes.Add("onkeyup", "limitarTexto(this, contador, 100);");
}
}
Observação: Observe que passei "this" no parâmetro "campo" da função. Isso indica que é o próprio componente (TextBox1).
Agora podemos executar a aplicação e testar o funcionamento.
Esperam que esta dica seja útil! Até a próxima e bons códigos!
Se inscrever