Produtos Divertidos? Eu Compraria!

O desenvolvedor é um blog sobre desenvolvimento web, não tratando apenas de programação mas também compartilhando experiências, métodos, debates e tendências da internet.

O Desenvolvedor é um blog de www.andafter.org
Assinar o Feed RSS
Como retirar acentos de um form utilizando javascript?

Como retirar acentos de um form utilizando javascript?

BomEste texto foi classificado como Bom
Em Internet, Programação
Por Guilherme Serrano
7 de Agosto de 2008

Como funciona o Replace em javascript? Aqui uns testes e explicação de como retirar espaço e acentos de um input de texto logo que o usuário digita o texto.

RSS Acompanhe O Desenvolvedor por Feeds!


Já antecipo que estou aprendendo javascript - e evoluíndo bastante com meus estudos para o novo And After, e eis que trabalhando no novo sistema de buscas internos eu queria limpar a acentuação dos formulários de busca sem utilizar server-side, recorri ao Google para aprender o replace em Javascript.

Falhei em um primeiro momento, o replace do javascript faz a substituição apenas uma vez.

Exemplo que não funciona (com replace)

Se você quer retirar os acentos de "É fácil plantar árvores" e usar um replace para substituir "á" por "a" a substituição acontecerá somente no primeiro "á".

Como eu não estou (estava?) familiarizado com javascript, não sabia das manhas. É possível fazer com replace desde que você crie um pequeno loop.

 

Exemplo que funciona (com replace)

No exemplo abaixo eu criei uma função para retirar todos os espaços do valor de um input de texto, o exemplo facilita o entendimento de funciona o replace.

function retiraespaco(x) {
var campo = document.getElementById(x)
novo = novo.replace(" ","-");

campo.value = novo;
}

 


Para retirar todos os espaços eu criei um loop para cada caracter da variável (neste caso o valor do input X). Mas e para retirar todas as possibilidades de acentuação?

Retirando a acentuação de um Input de texto

Você poderia fazer um loop para cada possibilidade, mas seria um trabalhão e o código ficaria grande, recorri novamente ao Google e encontrei em um fórum uma função feita por um tal de Luís, que a seguinte:

function retira_acentos(palavra) {
com_acento = ´áàãâäéèêëíìîïóòõôöúùûüçÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÖÔÚÙÛÜÇ´;
sem_acento = ´aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC´;
nova=´´;
for(i=0;i<palavra.length;i++) {
if (com_acento.search(palavra.substr(i,1))>=0) {
nova+=sem_acento.substr(com_acento.search(palavra.substr(i,1)),1);
}
else {
nova+=palavra.substr(i,1);
}
}
return nova;
}

 

Ainda não fiz testes para entender como funciona o search no javascript, mas mesmo sem entender o funcionamento específico de cada linha do código é fácil implementá-lo para uso. No meu caso eu chamei a função para definir o valor de um input enquanto o usuário digita, retirando automaticamente os acentos do formulário de busca, segue o código do formulário


<form class="form_busca" method="get" action="busca.asp" name="busca">
<input type="text" onkeyup="this.value=retira_acentos(this.value);" class="texto_busca" value="BUSCA" id="query" name="query" />
<input align="absmiddle" type="image" src="http://www.andafter.org/beta/images/botoes/ok.png" name="Buscar" />
</form>

 

Pronto, quando o usuário digitar uma busca automaticamente a função irá retirar os assuntos. Não custa nada chamar a função quando o formulário for enviado, fiz testes e as vezes quando o conteúdo é colado no input os acentos podem "escapar", se chamar a função quando o form for enviado não tem erro! 

Dúvidas, críticas e correções nos comentários! ;)

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: javascript, form, acentos, programacao, desenvolvedor

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti

Comentários

Chris Benseler

7/8/2008 17:45:00

Nunca tire a validação do server-side... por mais q tenha feito no javascript, é no server-side q vc garante q está tudo ok!

[Responder este comentário]

marcelo
[www]

22/9/2008 22:46:00

Seu trabalho é maravilhoso para os nets é isso aí mesmo!
Só q/ meu problema é outro:meu filho acessou site pôrno e ñ quero que exiba novamente no http;poís minha sobrinha também acessa o computador ,qto a isso você pode me ajudar?Sou marinheiro de 1.viagem.

[Responder este comentário]
Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 4 + 4?




web tracker