home | sitemap

Zoekveld op elke pagina

Voor het opnemen van een zoekveld (op elke pagina) kan worden volstaan met onderstaande voorbeeld.

Plaats onderstaande html op de pagina. Het toont een invulveld met standaard de tekst 'Zoeken...' (lichtgrijs.) Als het veld de focus krijgt verdwijnt de standaard tekst en kan men de zoekwoorden opgeven. Door een Enter te geven of op de afbeelding/link achter het veld te klikken wordt zoekmachine aangeroepen.

...
<p>
  <input type="text" name="qq" id="qq" value="Zoeken..." onfocus="if(
  this.value=='Zoeken...') this.value='';this.className='wbfocus'" onblur="if(
  this.value=='') {this.value='Zoeken...';this.className='wbblur'}" onkeypress="return
  onkeySearch(event);" /><a href="#" onclick="javascript:return onclickSearch();"><img
  src="/css/mijnstijl/gfx/link.gif" alt="" /></a>
</p>
...

Met ondersteuning van de volgende javascript en css:

function onclickSearch() {
  // haal het zoekwoord op
  var value = document.getElementById("qq").value;
  // als het niet de default tekst is
  if (value != "Zoeken...") {
    // roep de zoekmachine aan
    location.href = "/cgi/search.cgi?site=mijnwebsite;q="+encodeURIComponent(value);
  }
  return false;
}

function onkeySearch(e) {
  // check of er een Enter is gegeven en zo ja roep de onclickSearch functie aan
  return ifEnter(e, onclickSearch);
}

function ifEnter(e, func) {
  // Enter toets gedrukt?
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else {
    if (e) {
      keycode = e.which;
    } else {
      return true;
    }
  }
  // Ja! 
  if (keycode == 13) {
    // roep meegegeven functie aan
    func();
    return false;
  }
  return true;
}

.wbfocus { /* tekstkleur als veld focus heeft */
  color: black;
}
.wbblur { /* tekstkleur als veld de focus niet heeft */
  color: #aaa;
}