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”);
{
//een hook zetten naar de focus en blur events
//en de default waarde zetten
{
}
}
) applicatie voor het uitvoeren van functioneel testen. En ik moet zeggen: dat werkt heel plezierig. Niet alleen dat er wordt getest, maar als je code hebt aangepast en je eigen unit tests hebt uitgevoerd, dan is het fijn om even de functionele tests te runnen om te zien of niet alleen jouw service nog goed werkt, maar of ook de applicatie, de front-end, nog doet wat je verwacht.
