Use symbol in input text, and disappear when typed

Asked

Viewed 2,188 times

3

I have a text box, a input type text. And I wanted to insert an image in the corner, for example, a magnifying glass. And when the user starts writing, that magnifying glass disappears. It is possible to do this in Javascript?

<input type="text" name="search">
javascript jquery html

3 answers

6


You can use a background-image which changes position (disappears) in the 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;' */

So when the input receives the focus, the background image exits the input 20px to the left. When the input loses the focus, then the first pervalece rule. The advantage of this approach is that it uses only CSS.

Example

Simplest example without animations: http://jsfiddle.net/GFsLa/1/

  • 1

    Very good! Thank you!

  • @pc_oc, glad I can help.

  • Okay, the answer is valid, but when I take the input focus, the text superimposes the image.

  • @Viniciuslima, can change the text-indent not to stand on the image. Example: http://jsfiddle.net/ysB9P/ It is also possible to go via javascript/jQuery but CSS is better. Example: http://jsfiddle.net/Gg9nf/

1

The response of @Sergio is a very easy and usual way to do it. However, I used to rather put the image outside the input and put a negative margin, so it of the impression that is inside. Ex:

<style>
  .margin_neg{margin-left-40px;}
</style>    
<input type="text" value="" class="input" id="input1"/><img src="Exemplo.img" class="margin_neg"/>

Then when you start writing just give one hide() with jquery, or display:none as you prefer. Ex:

$('.margin_neg').hide();

1

Besides background-image, when what you want to appear is text and you are interested that the content is read by screen readers, it is interesting to use placeholder. The text of placeholder will appear while nothing is typed and disappear from focus on the element and start writing.

<input type="text" name="search" placeholder="Pesquisar no site"/>

View in jsfiddle.

Since old Ies do not support placeholder, here are polyfills in Web Forms : input placeholder https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Note: the difference between the use of placeholder and imagem via CSS is that the first case is indicated when you want the content to be read by screen reading tools used by people of low vision or blind, and the second is indicated when the annotation is merely visual and there will be no harm in being ignored,

  • 1

    yes, but that’s not what I’m looking for :)

  • 2

    @Emerson, good info but not for this post.

  • 2

    The problem is that people who don’t know placeholder can view this post and use CSS content: "Pesquisar no site"; for something that has accessibility implications. This is not the exact answer to this post, but it is a relevant complementary response, especially an extremely similar case involving loss of accessibility but visually appears to be OK. Accessibility.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.