Javascript Acentos

Olá a todos! Neste artigo
conversaremos sobre como colocar o texto dos campos para maiúsculo e a
retirada dos acentos do texto, uma prática muito utilizada por
programadores Delphi.

Primeiramente, vamos criar nossa função em JavaScript:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Linha 02: Declaro a função;

Linha 03: Crio uma variável que recebe o texto do campo;

Linha 04: Coloco o texto para maiúsculo;

Linha 05-16: Substituo os caracteres acentuados pelos caracteres não acentuados (Explicarei isto logo abaixo);

Linha 17: Atribuo ao campo do formulário a variável de nome valor.

A sintaxe da função replace é:
String.replace(TEXTO_A_SER_SUBSTITUIDO, TEXTO_QUE_VAI_SUBSTITUIR);

Os dois campos são obrigatórios. A variável TEXTO_A_SER_SUBSTITUIDO pode ser usado de mais de uma maneira:

a) Substituição simples

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

O resultado da variável texto após esse trecho será: Bem-vindo ao iMasters.

b) Substituição ignorando Maiúsculas e Minúsculas

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

O resultado da variável texto após esse trecho será: Bem-vindo ao iMasters.com.br.

Observe que o texto estre as barras está todo em minúsculo.

c) Substituição Global

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

O resultado da variável texto após esse trecho será: Bem-vindo ao iMasters.com.br. O iMasters.com.br agradece sua visita.

d) Substituição Global ignorando Maiúsculas e Minúsculas

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

O resultado da variável texto após esse
trecho será: Bem-vindo ao iMasters.com.br. O iMasters.com.br agradece
sua visita. Observe que o texto estre as barras está todo em minúsculo.

Bom, mas como irei utilizar isso em meu código?

Após criada a função JavaScript, você
simplesmente faz a chamada da função pelos campos do formulário que você
deseja que seja colocado em maiúsculo e retirado os acentos. Veja o
código abaixo.

Utilizei a função onBlur do JavaScript
que é chamada assim que o elemento perde o foco, ou seja, o usuário irá
digitar o texto normalmente com acento e minúsculo, mas quando ele tirar
o foco do elemento a função vai ser chamada e fará as substituições
necessárias.

Mas eu vou ter que colocar em todos os campos do meu formulário uma chamada para esta função, isto é muito chato!

Concordo com você que está pensando
isso, por isso colocarei outra forma de fazer a mesma coisa fazendo
somente uma chamada à função.
Para que isto possa ocorrer teremos que mudar um pouco
nossa função. Veja código abaixo:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Linha 04: O
documento (a página HTML) possui um array de forms, então como só
usamos um form na nossa página ele é o índice 0 (zero) do array;

Linha 06: O form possui um array de elementos, nesta linha eu percorro todos os elementos do array;

Linha 07: Verifico se o elemento atual é do tipo textarea ou text que são os únicos que nos interessam;

Linha 08: Coloco o texto desse elemento para maiúsculo;

Linha 09-22: Faço as substituições necessárias.

E o nosso formulário fica assim:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Linha 01: No formulário utilizamos a função onSubmit, que é chamada quando o usuário clica no botão Enviar

É isso aí! Espero que tenham gostado.