Member Avatar for adobe71

I want to create custom search box like Google.
I want to place the image inside the textbox and
when user click on textbox the image on textbox
must disappear.How it is possible.

  • 2 Contributors
  • 1 Reply
  • 79 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by sergb
Member Avatar for sergb

The only way that I know to put an image inside a plain textbox is to set the image as the background of the textbox. Then you can handle the focus event on the textbox and remove the background image. You can also handle the blur event to put the image back, if necessary.

Here is some code (I hope I remember the property names correctly):

<input type="text" style="background-image: url(path/to/your/image.jpg);"
onfocus="delBgImage(this);" onblur="setBgImage(this, '/path/to/your/image.jpg');" />

<script type="text/javascript">
function delBgImage(textbox) {
    if (textbox.style)
        textbox.style.backgroundImage = "";
}
function setBgImage(textbox, image) {
    // Only set the image if textbox is empty.
    if (textbox.value != "")
        return;
    if (textbox.style)
        textbox.style.backgroundImage = image;
}
</script>
Edited by sergb because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.