title: jquery focus and blur function but also if val is not equal to null.
body: <p>I am trying to modify the background of an input based on the focus and blur events. That part works fine, but I also want to set the background if the client has entered a value into the search box. It does work if you enter text and then immediately click the submit button (although you can see the background change very briefly). </p>
  
  <p>But if a value is currently in the search box AND the client triggers the blur function, it also changes the background of the input. </p>
  
  <p>How can I ensure that the blur function is not triggered if there is a value in the search box?</p>
  
  <p>This is my code so to date: </p>
  
  <pre><code> // change input field on blur and focus
  var $searchFocus = 'url("img/layout/spyglass.png") no-repeat 2px 0 #FFFFFF';
  var $searchBlur = 'url("img/layout/spyglass-text.png") no-repeat 2px 0 #FFFFFF';
  $('#query').css('background', $searchBlur);
  
  if($('#query').val() !='') {
      $('#query').css('background', $searchFocus);
  }
  
  $('#query').focus(function(){
      $('#query').css('background', $searchFocus);
  }); 
  
  $('#query').blur(function() {
      $('#query').css('background', $searchBlur);
  });
  </code></pre>
  
  <p>I've made a <a href="http://jsfiddle.net/lharby/e6uTB/" rel="nofollow">jsfiddle</a></p>
  
  <p>Maybe I want something different to the blur function? </p>
  
  <p>TIA</p>