Removendo acentos de um campo texto de uma página ASP.NET durante a digitação (Java Script)

Postado por Daniel Garcia às 19:41 TERÇA-FEIRA, 8 DE SETEMBRO DE 2009

Pessoal, vou dar uma dica de como podemos de forma simples remover caracteres acentuados de um campo durante a digitação. Para isso contarei com a ajuda de uma função Java Script.

A função que desenvolverei executará as seguintes tarefas:

1 – Pegar o valor digitado no campo texto;

2 – Localizar o caractere acentuado, conforme especificado dentro da variável “acento” da função;

3 – Substituir o caractere acentua do pelo caractere não acentuado correspondente, na variável “semacento”;

4 – Por fim, retornar o texto sem acentos para o campo de origem.

Veja a função Java Script a seguir:

    <script type="text/javascript" language="javascript">
        function retirarAcentos(campo) {
               var texto = campo.value;
 
             var acento = 'áàãâäéèêëíìîïóòõôöúùûüçÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÖÔÚÙÛÜÇ';
  
             var semacento = 'aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC';
  
            var nova='';

               for (i = 0; i < texto.length; i++) {
                     if (acento.search(texto.substr(i, 1)) >= 0) {
                          nova += semacento.substr(acento.search(texto.substr(i, 1)), 1);
   
               }
  
                  else {
                         nova += texto.substr(i, 1);
  
                  }
  
            }

               campo.value = nova;
   
     }

    </script>

Lembre-se o tag <script> deve estar contido dentro do tag <head> da página.

Adicionarei um objeto do tipo TextBox à página .aspx, que receberá por padrão o nome de objeto “TextBox1”:

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>

</form>

O próximo passo é associar a chamada da função Java Script ao campo “TextBox1” da página. Para isso teremos que atribuir ao campo texto a tarefa de executar o evento “onkeyup”, que ira díspar a função.

Para isso utilizarei o evento Load da página ASP.NET. Conforme código a seguir:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

         If Not Page.IsPostBack Then

             TextBox1.Attributes.Add("onkeyup", "retirarAcentos(this);")

         End If 

End Sub 

Você poderá ver mais exemplos de como trabalhar com funções Java Script no ASP.NET na seção Java Script do blog.

Concluído! Agora basta executar a página e ver o resultado.

Espero que aproveitem a dica!

4.7 ponto(s). Avaliado por 3 pessoas

  • Currently 4,666667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

ASP.NET | Java Script

Limitando a Quantidade de Caracteres Digitados em um TextBox do tipo MultiLine

Postado por Daniel Garcia às 20:35 SÁBADO, 1 DE AGOSTO DE 2009

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!

5.0 ponto(s). Avaliado por 4 pessoas

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

ASP.NET | Java Script

Java Script: Trabalhando com Caixas de Mensagem no ASP.NET

Postado por Daniel Garcia às 16:15 DOMINGO, 19 DE JULHO DE 2009

No desenvolvimentos de aplicações é comum trabalharmos com "Caixas de Mensagens" (Message Boxes), porém em aplicações web este recurso está limitado aos componentes que o navegador pode suportar. 

No post Executando Java Script em Tempo de Execução com ASP.NET demonstrei como executar uma função Java Script em tempo de execução com ASP.NET. Utilizei a função "alert", para exibir uma caixa de mensagem durante a execução de um evento.

No entanto existem outras formas de se trabalhar com caixas de mensagem no ASP.NET. Veremos neste post como utilizar as funções "alert" e "confim" do Java Script para exibir caixas de mensagens a partir do click de um botão. Sem que seja executado a postagem da página.

Criarei um exemplo bem simples para fazer essa demonstração.

1 - Em um webform, adicione dois buttons, que chamaremos de "btnAlerta" e "btnConfirma".


Botões "btnAlerta" e "btnConfima"

Veja o código do Webform:

<body>
     <form id="form1" runat="server">
     <div>
          <asp:Button ID="btnAlerta" runat="server" Text="Alerta" Width="80px" />
          <br />
          <br />
          <asp:Button ID="btnConfirma" runat="server" Text="Confirma" Width="80px" />
     </div>
     </form>
</
body>

2 - Agora criaremos o código que atribuirá à chamada das funções "alert" e "confirm" do Java Script aos botões "btnAlerta" e "btnConfirma".

protected void Page_Load(object sender, EventArgs e)
{
     if (!Page.IsPostBack)
     {
          btnAlerta.Attributes.Add(
"onclick", "alert('Funcionou!');");
          btnConfirma.Attributes.Add(
"onclick", "return confirm('Confirma?');"); 
      }
}

Repare que utilizei o return na função confirm. Isso porque ela retorna um valor booleano. Se clicarmos em "Ok" retornará "true" e página será postada. Se clicarmos em "Cancelar" retornará "false" e não ocorerá a postagem.

O "confirm" é muito útil em situações onde precisamos da confirmação do usuário para executar uma operação. Como por exemplo: A exclusão de um item.

3 - Execute o projeto.

Quando clicar no botão Alerta a seguinte mensagem será exibida:


Resultado da execução da função "alert"

Quando clicar no botão Confirma a seguinte mensagem será exibida:


Resultado da execução da função "confirm"

Espero que está dica seja de grande utilidade. Até a próxima e bons códigos! 

4.2 ponto(s). Avaliado por 5 pessoas

  • Currently 4,2/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

ASP.NET | Java Script

Criando Efeito de Seleção em um ASP.NET GridView usando Java Script

Postado por Daniel Garcia às 10:28 SÁBADO, 18 DE JULHO DE 2009

O GridView é um dos componente mais utilizado dentro do desenvolvimento de aplicações, porém ele acaba tendo algumas limitações se compararmos com o grid do Windows Forms.

Por isso, tenho procurado postar dicas de como incrementar seu uso em nossas aplicações. Meus posts anteriores foram:

Criando um GridView com Barra de Rolagem e Cabeçalho Fixo
Calculando o Somatório de uma Coluna do GridView

A minha nova dica mostrará como criar um efeito de seleção nas linhas do GridView, ao passar o mouse.

Para isso precisaremos fazer o seguinte:

1 - Criar as funções Java Script que manipularão os efeitos de "selecionar" e "deselecionar" as linhas da grid.

<script type="text/javascript" language="javascript">

     var corOriginal;

     // Função de seleção da linha da grid
     function selecionarLinha(item) {

          // Armazenha a cor original da grid
         
corOriginal = item.style.backgroundColor;         
         // Atribui nova cor a linha
         
item.style.backgroundColor = "#3399FF";

     }

     // Função de deseleção da linha da grid
     function deselecionarLinha(item) {

          // Retorna a cor original a linha
          item.style.backgroundColor = corOriginal;

     }

</script>

2 - Agora precisamos atribuir as funções Java Script que criamos às linhas do GridView. Para isso precisaremos utilizar o evento "RowCreated" do GridView.

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
     if (e.Row.RowType == DataControlRowType.DataRow)
     {
          e.Row.Attributes.Add(
"onmouseover", "selecionarLinha(this);");
          e.Row.Attributes.Add(
"onmouseout", "deselecionarLinha(this);");
     }

}

Observe que utilizaremos o "onmouseover" para selecionar a linha e o evento "onmouseout" para deselecionar a linha.

Executamos o projeto e vereremos o resultado. Passe o mouse sobre a grid para ver o que acontece.


GridView com efeito de seleção

Espero que aproveitem essa dica! Vamos em frente!

5.0 ponto(s). Avaliado por 1 pessoas

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

ASP.NET | Java Script

Executando Java Script em Tempo de Execução com ASP.NET

Postado por Daniel Garcia às 11:23 SEXTA-FEIRA, 17 DE JULHO DE 2009

Vou mostrar neste post como é fácil executar um comando Java Script em Tempo de Execução com ASP.NET. 

Usaremos neste exemplo uma mensagem de "alert", simplesmente. Mas você poderá, em tese, executar qualquer tipo de comando Java Script. 

Para isso implemente o seguinte código (escolhi o evento Page_Load): 

protected void Page_Load(object sender, EventArgs e)
{
     ClientScript.RegisterStartupScript(
this.GetType(), "teste", "alert('Teste de Java Script bem sucedido!');", true);
}

 Veja o resultado:


Alert Java Script

 Muito simples! Espero que tenham gostado.

5.0 ponto(s). Avaliado por 1 pessoas

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

ASP.NET | Java Script

Sobre o Autor

Daniel Garcia - MCP, MCTS, MCPD
Meu nome é Daniel Garcia, venho atuando no mercado de tecnologia há mais de uma década. Durante esse tempo tive a oportunidade de trabalhar com diversas tecnologias, principalmente Microsoft. Conquistei os títulos: MCP, MCTS, MCDP e MCT. Desde então, venho contribuindo com toda a Comunidade, divulgando meu conhecimento das tecnologias Microsoft.