shows and hides a label, used as placeholder text

Placeholder workaround

// Relevant HTML and JS

          <label for="searchbox" id="searchboxPlaceholder">Search</label>
          <input type="text" name="Query" id="searchbox" />
          <script>
            (function(d){
              var sb = d.getElementById('searchbox'),
                  ph = d.getElementById('searchboxPlaceholder');
              var hide = function() {
                      ph.style.display = 'none';
                    };
              var show = function() {
                      if (sb.value === '') {
                        ph.style.display = 'block';
                      }
                    };
              if (sb.value !== '') { // is field is prefilled on page load?
                hide();
              }
              if (sb.addEventListener) {
                sb.addEventListener('focus', hide, false);
                sb.addEventListener('blur', show, false);
              } else if (sb.attachEvent) {
                sb.attachEvent('onfocus', hide);
                sb.attachEvent('onblur', show);
              }
            }(document));
          </script>

// Relevant CSS
//
// Note that my form has "position: relative",
// and the input field #searchbox has some padding and things
// that I have adjusted for, hence the "top: 9px; left: 5px;" below

#searchboxPlaceholder { position: absolute; top: 9px; left: 5px; font-size: 12px; color: #e8e8e8; }

I added this:
if (sb.value !== '') { // is field is prefilled on page load?
hide();
}
which is a fix for when the field is prefilled, either from the server, or when the user uses the back button