Click here to Skip to main content
15,867,330 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
I have a search bar where on the page load the image for the onfocus is showing in the text field. however when i click into it and out the onblur is triggered and everything is fine... to fix this i css-ed the onblur image as a background to the search field.. this works perfectly.... on page load the onblur image shows, when a search is made it goes to the search page works perfect. but when back is pressed there is still the input left over along with the the onblur image mading it look at distorted.

html
XML
<div id="searchFieldBox">
                <input type="text" id="sf" name="searchquery" onBlur="fieldSwap('sfNorm.png')" onFocus="fieldSwap('sfFocus.png')">
                </div>


css
CSS
#sf{
	background:url(images/sfNorm.png);
	background-repeat: no-repeat;


javascript
C#
function fieldSwap(image){
    var sf = document.getElementById('sf');
    if(sf.value == ""){
      sf.style.background = "url(images/"+image+") no-repeat";
    }
}


how can i have the onBlur image show on page load without it staying when back on the browser is pressed with an input in it. (im highly considering just to use all white backgrounds lol)
Posted
Comments
Mohibur Rashid 6-Apr-13 0:34am    
at somepoint you better hide that image
Graham Breach 6-Apr-13 4:15am    
Can't you just use CSS for this? Use #sf { ... } for the blurred image and #sf:focus { ... } for the focussed one.
suzanne88 6-Apr-13 4:51am    
if you use css you cant swap the images back and forth... once the focus is triggered the focus image will continue to stay there..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900