Tenho uma caixa de texto, uma input type text. E queria inserir uma imagem no canto, por exemplo, uma lupa. E quando o utilizador começar a escrever, essa lupa desapareça. É possível fazer isso em Javascript?
<input type="text" name="search">
Você pode usar uma background-image
que muda de posição (desaparece) no focus
:
input {
background-image: url(http://www.levenmetwater.nl/static/global/images/icon-search.png);
input:focus {
background-position: -20px center;
/* ou pode mesmo removê-la com: 'background-image: none;' */
Assim quando o input
recebe o focus
, a imagem de fundo sai do input 20px
à esquerda. Quando o input
perde o focus
, então a primeira regra pervalece. A vantagem desta abordagem é que usa somente CSS.
Exemplo mais simples sem animações: http://jsfiddle.net/GFsLa/1/
text-indent
para não ficar or cima da imagem. Exemplo: jsfiddle.net/ysB9P Também é possível ir via javascript/jQuery mas CSS é melhor. Exemplo: jsfiddle.net/Gg9nf
A resposta do @Sergio
é um jeito bem fácil e usual de se fazer. Porém, eu usava bastante colocar a imagem fora do input
e colocar uma margem negativa, assim ela da impressão que está dentro. Ex:
<style>
.margin_neg{margin-left-40px;}
</style>
<input type="text" value="" class="input" id="input1"/><img src="Exemplo.img" class="margin_neg"/>
Ai quando vc começar a escrever basta dar um hide()
com jquery, ou display:none
como você preferir. Ex:
$('.margin_neg').hide();
Além de background-image
, quando o que quiser que apareça seja texto e tenha interesse que o conteúdo seja lido por leitores de tela, é interessante usar placeholder
. O texto de placeholder
irá aparecer enquanto nada estiver digitado e desaparecer der foco no elemento e começar a escrever.
<input type="text" name="search" placeholder="Pesquisar no site"/>
Como IEs antigos não suportam placeholder, aqui tem polyfills em Web Forms : input placeholder https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Nota: a diferença entre uso de
placeholder
eimagem via CSS
é que o primeiro caso é indicado quando você quer que o conteúdo seja lido por ferramentas de suporte a leitura de tela usada por pessoas de baixa visão ou cegas, e o segundo é indicado quando a anotação é meramente visual e não haverá prejuízo em ser ignorada,
placeholder
podem ver esse post e usar CSS content: "Pesquisar no site";
para algo que tem implicações de acessibilidade. Essa não é a resposta exata para esse post, mas é uma resposta complementar pertinente, em especial um caso extremamente parecido que envolve perda de acessibilidade mas visualmente aparenta estar OK. Acessibilidade importa.
Commented
10/02/2014 às 10:21