Watermark textbox met Javascript en CSS

Een van de onderdelen van de ASP.Net Ajax control toolkit is de watermark textbox. Voor hen die deze nog niet kennen, de watermark textbox is een texbox waarin bijvoorbeeld een hint staat wat je moet invullen in die textbox. De bedoeling is natuurlijk dat die hint verdwijnt als je er iets invult, en weer tevoorschijn komt als je je invoer weer verwijdert. Wat er vaak ook bij wordt gemaakt is een aparte opmaak voor die textbox, zodat je duidelijk kunt zien dat je in die textbox nog niets hebt ingevoerd.
Dit zou er als volgt uit kunnen zien:

(er is ook een mini-filmpje van hoe het er uit ziet, maar ik kan bij deze overigens fijne blog dienst geen Flash of Avi’s hosten. Als je het mini-filmpje wilt zien moet je even dit linkje openen.)

Dus, gebruiken en klaar zou je zeggen.
Helaas… de control toolkit is in Visual Studio 2008 als ‘standaard’ opgenomen, maar in Visual Studio 2005 is het nog een aparte download, en dat wil niet elke beheerder installeren. En in mijn huidige project, met Visual Studio 2003, is het niet eens beschikbaar.
De oplossing is snel gemaakt, want heel complex is het niet.
Wat hebben we nodig:

  • Een CSS voor de opmaak als de watermerk-text zichtbaar is en eentje voor als de watermerk-text niet zichtbaar is
  • Een stukje Javascript om bij de onBlur te kijken of de textbox leeg is of de watermerk-text bevat of een ingevoerde tekst bevat en dan de juiste CSS te zetten
  • Een stukje Javascript om bij het selecteren van een textbox (focus verkrijgen) de watermerk-CSS weg te halen
  • Een stukje code behind om bij het renderen van de pagina de juiste style te zetten en de Javascript aan de textboxen te knopen.

Als eerste de CSS. Is natuurlijk een voorzet, style het the way you like it.

.watermarkOn
{
  font-size: 0.8em;
  font-family : Verdana, Helvetica, sans-serif;
  background-color : #ddffaa;
  font-variant: small-caps

}
.watermarkOff
{
}

Als tweede de Javascript. Mag in de pagina zelf of in een externe file:

function OnWatermarkFocus(elementId, defaultText)
{
  //als de control de focus krijgt kijken of de waarde gelijk is aan de defaulttext
  //dan heeft de control de watermarkOn style maar tijdens invoer moet de control de
  //watermarkOn value hebben en leeg zijn

  if (document.getElementById(elementId).value == defaultText)
  {
    document.getElementById(elementId).className = “watermarkOff”;
    document.getElementById(elementId).value = “”;
  }
}

function OnWatermarkBlur(elementId, defaultText)
{
  //als de textbox leeg is of de waarde van de defaultValue heeft
  //dan de watermarkOn style toepassen
  var textValue = document.getElementById(elementId).value;
  if (textValue == defaultText || textValue.length == 0)
  {
    document.getElementById(elementId).className = “watermarkOn”;
    document.getElementById(elementId).value = defaultText;
  }
  //in alle andere gevallen de watermarkOff style toepassen

  else
  {
    document.getElementById(elementId).className = “watermarkOff”;
  }
}

En tot slot de code behind. Naamgeving is natuurlijk afhankelijk van de namen van je textbox controls die je hebt ingevoegd.

private void Page_Load(object sender, System.EventArgs e)
{
  SetWatermark();

}

private void SetWatermark()
{
  CreateWatermarkCode(TextBoxWoonplaats , “Uw woonplaats aub in hoofdletters”);
  CreateWatermarkCode(TextBoxNaam , “Vul hier uw volledige naam in”);

}
private void CreateWatermarkCode(TextBox textbox, string defaultValue)
{
  //als de textbox leeg is of de waarde van de defaultValue heeft
  //dan de watermarkOn style toepassen
  if ((textbox.Text == defaultValue) || (textbox.Text.Length ==0))
  {
    textbox.Attributes.Add(“class”, “watermarkOn”);
  }
  else //in alle andere gevallen de watermarkOff style toepassen
  {
    textbox.Attributes.Add(“class”, “watermarkOff” );
  }
  //de eerste keer bij het laden van de pagina
  //een hook zetten naar de focus en blur events
  //en de default waarde zetten
  if (!IsPostBack)
  {
    textbox.Attributes.Add(”onfocus”, string.Format(”OnWatermarkFocus(’{0}’, ‘{1}’)”, textbox.ClientID, defaultValue));
    textbox.Attributes.Add(”onblur”, string.Format(”OnWatermarkBlur(’{0}’, ‘{1}’)”, textbox.ClientID, defaultValue));
    textbox.Text = defaultValue;
  }
}
Dit soort grafische zaken heeft natuurlijk eigenlijk niet zo veel met Ajax van doen. Het wordt wel vaak in één adem genoemd en zoals gezegd is het ook onderdeel van de Ajax control toolkit, maar het doet niets a-synchroons en ook al niets Xml’s.
Laatst las ik iemand en die noemde het: JAC (Javascript and CSS). Dat klinkt al beter, en dan noemen we het beestje tenminste bij zijn naam.

3 thoughts on “Watermark textbox met Javascript en CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s