0

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
2
Views
7 Years
Discussion Span
Last Post by sergb
0

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: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.