Metaora CodeSnippet

Bloquear acentos e caracteres especiais com JavaScript

Postado em 07. fev, 2012 por Jonatas Cezarino em Tudo sobre Tecnologia

Olá pessoal!

Ja publicamos aqui duas maneiras de lidar com acentuação e caracteres especiais, sendo:
Remover caracteres especiais com JavaScript (http://info.metaora.com.br/2011/08/29/remover-caracteres-especiais-com-javascript/) e Remover acentos de String – Asp.NET C# (http://info.metaora.com.br/2011/08/29/remover-acentos-de-string-asp-net-c/). Porém recentemente precisei descobrir uma maneira de remover os acentos e caracteres especiais assim que o campo for preenchido.
Com certeza existem muitas maneiras de fazer isso, no meu caso utilizei JavaScript e criei a função declarada abaixo. Devem haver métodos mais elegantes, porém a função abaixo funciona corretamente. Ela funciona quando o caracter for digitado ou mesmo quando for efetuado um Ctrl+C / Ctrl+V:

function RemoveAcento(field) {

field = document.getElementById(field);

//Remove os caracteres especiais declarados abaixo:
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/[-[\]{}*+?%&amp;amp;amp;amp;@!?¨_:,;'"<>~=\\^$|#\b]/g, "");

//Trata as acentuações:
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/á/gi,"A");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/à/gi,"A");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/â/gi,"A");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ã/gi,"A");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ä/gi,"A");
//
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/é/gi,"E");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/è/gi,"E");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ê/gi,"E");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ë/gi,"E");
//
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/í/gi,"I");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ì/gi,"I");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/î/gi,"I");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ï/gi,"I");
//
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ó/gi,"O");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ó/gi,"O");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ô/gi,"O");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ö/gi, "O");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/õ/gi, "O");
//
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ú/gi,"U");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ù/gi,"U");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/û/gi,"U");
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ü/gi,"U");
//
document.getElementById(field.id).value = document.getElementById(field.id).value.replace(/ç/gi,"C");
}

Para utilizá-la basta chamar a função acima no evento onKeyUp() do campo texto, exemplo:

<asp:TextBox ID="txtMeuCampo" runat="server" CssClass="text-input" MaxLength="40" onKeyUp="return RemoveAcento(this.id)"></asp:TextBox>

Caso alguém conheça outros métodos, compartilhe conosco!

Até a próxima!

Tags: ASP.NET, JavaScript