Mostrarei um script que faz o texto sumir ao clicar e tags para selecionar o texto de um textarea ao passar o mouse. O script é pequeno e pode ser usado para formulários de seu blog ou site.
Também pode ser usado para deletar as palavras ao passar o mouse, porém, isso pode frustrar o visitante já que ele talvez não tenha tempo de ler o texto ou passe o mouse por engano.
Lembrando que qualquer caracter retirado ou no local errado pode fazer não funcionar.
Selecionar o texto na textarea
É muito útil, pois quando as pessoas não sabem usar as teclas de atalho Ctrl A acabam arrastando o mouse para selecionar e no inicio ou final do código pode ficar um caracter sem selecionar, seria erro na certa.Esse primeiro exemplo não precisa usar nem um javascript em suas páginas.
Código:
<textarea style="background: #ccc; height: 60px; width: 150px; color: red;"
onfocus="this.select()" onmouseover="this.focus()">
Texto a ser selecionado
</textarea>
Resultado:Entenda as Tags:
Não seria necessário cores mas..., vou usar CSS para o estilo então style=
background: #ccc; Onde background indica cor de fundo e #ccc é o código da cor cinza.
height: 60px; Height indica a altura e 60px é sessenta pixeis
width: 150px; Width indica a largura e 150px é cento e cinquenta pixeis
color: red; É a cor da fonte vermelha.
As tags que vão causar o efeito selecionar:
onfocus="this.select()" onmouseover="this.focus()"
Texto que some ao clicar
Pode ser colocado em textarea ou em formulários na tag Input text, pode ser usado em caixas de busca, envio de email(algo como Seu@Email), etc.É bastante útil pois ninguém que vai preencher um formulário gosta de deletar texto antes.
O script você adiciona uma única vez na página ou blog, e ele vai funcionar para todos os formulários que tenham essa tag onfocus="cleanit(this);refresh_nu()"
Script que deleta o texto
O script é colocado em qualquer lugar entre as tags <body> </body> ou em blogs deve ser colocado em local especifico para eles, no caso do blogger, Adicionar gadget.
Código do Script:
<script><!--
function
cleanit(thefield){if(thefield.defaultValue==thefield.value){thefield.value="";};}
//--></script>Acima é o script que faz a função de deletar as palavras, abaixo os códigos(tags html) que geram o elemento, ou "caixa de texto"
Na parte das tags html, ainda irei incluir placeholder='' que faz o mesmo efeito do script acima, faz melhor, ele faz com que o texto deletado volte se o usuário tirar o cursor do campo de texto e clicar em outra área da página, mas, apenas se a pessoa ainda não digitou nada, isso evitará o incomodo do texto da pessoa ser apagado caso ela tenha digitado.
Porém o placeholder não funciona no Internet Explorer 9 ou versão anterior, que é meio caminho andado, e, no Google Chrome o placeholder não aceita cor de fonte, no Mozilla Firefox tudo funciona as mil maravilhas.
Usando apenas o placeholder
Lembrando que para o placeholder não é preciso o script acima, veja o código:<input style='width: 270px; color: red; font-family: verdana;'
placeholder='Texto B a ser deletado ao clicar aqui' type='text'>Resultado:
Teste com os 3 navegadores mais usados, que citei nomes acima e você verá que funciona de maneiras diferentes em um e não em outro...
Mas, como disse, vou colocar o placeholder nos códigos abaixo para saberem onde fica(quem quiser exclui) e porque ele pode ter um papel que é fazer parecer que a frase reaparece, na verdade surge outra igual.
Exemplo de código Input text para formulário de texto:
<input style="width: 270px;"
placeholder='Texto B a ser deletado ao clicar aqui'
onfocus="cleanit(this);refresh_nu()"
value="Texto a ser deletado ao clicar aqui" type="text">Exemplo em funcionamento, Clique Aqui, e veja ▼Exemplo de código textarea:
<textarea style="height: 60px; width: 150px;"
placeholder='Texto B a ser deletado ao clicar aqui'
onfocus="cleanit(this);refresh_nu()">
Texto a ser deletado ao clicar aqui</textarea>Exemplo em funcionamento, Clique Aqui, e veja ▼Para fazer apagar o texto ao passar o mouse basta(tendo o script em sua página) usar um dos códigos acima e substituir esse trecho de código:
onfocus="cleanit(this);refresh_nu()"Por esse:
onfocus="cleanit(this);refresh_nu()" onmouseover="this.focus()"O código do textarea ficaria assim:
<textarea style="height: 60px; width: 150px;"
placeholder='Texto B a ser deletado ao clicar aqui'
onfocus="cleanit(this);refresh_nu()" onmouseover="this.focus()">
Texto a ser deletado ao passar o mouse</textarea>
Exemplo em funcionamento, Clique Aqui, e veja ▼
Observações:
Se não conseguir ver os exemplos clique aqui.
Talvez você precise clicar aqui para ver novamente os exemplos.
O texto para ser substituído está nessa cor, tente observar que cada caracter precisa ser respeitado, um sinal fora do local ou excluído da problema.
Se não conseguir ver os exemplos clique aqui.
Talvez você precise clicar aqui para ver novamente os exemplos.
O texto para ser substituído está nessa cor, tente observar que cada caracter precisa ser respeitado, um sinal fora do local ou excluído da problema.
Imagem muda ao passar o mouse
Como devemos fazer para que funcione mais de uma vez? Ou seja, funcionar também com o texto digitado depois.
ResponderExcluirAnônimo
ResponderExcluirSe você se refere ao texto que apaga ao passar o mouse ou clicar, volta ao normal depois de atualizar a página, geralmente é usado para um campo onde a pessoa preenche com texto ou palavra e ela envia ou faz uma busca, nesses casos geralmente a página atualiza.
Até existem scripts que fazem o que você quer, mas, além de ficar mais pesado na página imagine se a pessoa digitasse e depois clicar em outra parte da tela para algo ou uma tecla de atalho e voltar a digitar, o texto apagaria e ela teria que digitar novamente, um exemplo disso, aqui nesse campo, eu não digitei Anônimo, eu selecionei ele no seu comentário e arrastei para cá, se meu texto sumisse eu...
Adorei o post, usei pra modificar o gadget do feedburner ficou show!!! parabéns!!!
ResponderExcluirNo blogger precisa ser assim:
ResponderExcluironFocus='this.value="";'
O jogo de aspas é o segredo.
gostei
ResponderExcluirmas como faço para mudar a cor do texto a ser deletado?
Anônimo
ResponderExcluirNo código acima, onde diz red você pode substituir por outro nome de cor básica em inglês, por exemplo, se substituir por blue a fonte será azul.