• How to create watermark text in Textbox in ASP.NET

    by  • May 22, 2014 • jQuery and Microsoft .NET, Microsoft .NET C# (C-Sharp), Microsoft ASP.NET, Microsoft VB.NET • 0 Comments

    Adding watermark text is a nice way to tell user what to enter in a Textbox. It may help user to enter valid and exact value for that specific Textbox. It may also helpful for user when there are so many textboxes on the page and you want user to submit page after providing all or some specific values. Instead of text, images can also be shown in Textboxes for watermark. This can make your website more attractive and user friendly. Watermark text can be created with many ways. You can use onfocus and onblur events of the Textbox and write JavaScript code for watermark text in these events. You can also use TextBoxWatermark Extender from AJAX control Toolkit. Other plugins are also available but in this article, I am using simple jQuery code for this purpose. Let’s see the code now.

    You need to download jQuery file and add into your project. I have my jQuery file in Script folder.

    • Create a website in Visual Studio in Visual Basic or C#
    • Write following tag in between head tag of aspx page

    • Write code below between div tag

    • Now add another script tag and write following code in it

    Above code creates watermark text for those Textboxes that contains css class ‘watermark’ and I am doing this with the help of Tooltip attribute of Textboxes. The Tooltip attribute gets rendered as ‘title’. So I have used title to compare it with Textbox value so that I can remove or add watermark class to Textboxes. When a Textbox gets focus of the user then I have removed the watermark css class. If user enters some text then there is no need to keep watermark so I have removed it but if the user shift its focus to without entering any value then watermark text need to be displayed again so I have added watermark css class again. All this is done by comparing Textbox value by title of Textbox which is the Tooltip value and you need to keep Textbox text and Tooltip value same to achieve desired functionality.

    • Press F5 and see the result. You can download complete code sample from below link



    Namecheap.com
    Avatar of GetCodeSnippet.com

    About

    GetCodeSnippet.com provides you high quality Microsoft .NET development related articles, tutorials and sample code for ASP.NET, C#, VB.NET, AJAX, WCF, WPF, Web Services, Windows Services, SQL Server and other technologies.

    Leave a Reply