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.
Je ziet ‘m steeds vaker, helemaal als je met barcodes bezig bent er een beetje op let (ik zit op dit moment op een project bij een klant die veel met RFID en barcodes doet, dus automatisch gaat dan je aandacht meer naar verschijnselen ervan in de dagelijkse pratijk uit).
‘k moet zeggen dat ik in eerste instantie niet stond te springen om weer een nieuw soort framework: Jquery.
Mijn top 5 ervaringstips:
