I have a text box, an input type text . And I wanted to insert an image in the corner, for example, a magnifying glass. And when the user starts writing, this magnifying glass disappears. Is it possible to do this in Javascript?
<input type="text" name="search">
You can use a background-image that changes position (disappears) in 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 input receives focus , the background image exits the input 20px on the left. When input loses focus , then the first rule goes away. The advantage of this approach is that it uses only CSS.
Simplest example without animations: link
The answer of @Sergio is a very easy and usual way to do it. However, I used a lot to put the image out of input and put a negative margin, so it's the impression that's 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 hide() with jquery, or display:none as you prefer. Ex:
$('.margin_neg').hide();
In addition to background-image , when what you want to appear is text and you want the content to be read by screen readers, it's worth using placeholder . The text of placeholder will appear while nothing is typed and disappear focus on the element and start writing.
<input type="text" name="search" placeholder="Pesquisar no site"/>
Because old IEs do not support placeholder, here's polyfills in Web Forms: input placeholder link
Note: The difference between
placeholderandimagem via CSSusage is that the first case is indicated when you want the content to be read by screen reading support tools used by low vision or blind people, and the second is indicated when the annotation is merely visual and there is no harm in being ignored,