TextBox Watermark Effect In TypeScript

Introduction

Sometimes the best way to provide a hint of what must be entered into a textbox is to put some text in the textbox. This is also referred to as a textbox watermark.

These are some key features of textbox watermarks:

It provides a hint string within the textbox
It is removed when the textbox receives the focus
It will revert to the hint text when the textbox loses focus and no text was entered

We create a simple example of a TextBox Watermark Effect. We use one TextBoxes (txtname) in our example and we declare the TypeScript functions ShowName().

These functions are useful for checking the value of the TextBox and if the TextBox has a value it will set it as a TextBox value otherwise it will set the default value ("Enter your name Here").

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

Give the name of your application as "TextBox_Watermark_Effect" and then click "Ok".

Step 2

After Step 1, right-click on "TextBox_Watermark_Effect". A pop-up window is opened. Click on "Add" -> "New Item" -> "Web From". Give the name of your WebForm as "Watermark_Demo.aspx" and then click ok.

Step 3

After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, CSS file, and aspx file and looks like the following.

Coding

app.ts

class TxtWaterMark
{
ShowName()
{
var n = ( < HTMLTextAreaElement > document.getElementById("txtname")).value;
if (n == "")
{
( < HTMLTextAreaElement > document.getElementById("txtname")).value = "Enter your name here";
}
}
}
window.onload = () =>
{
var obj = new TxtWaterMark();
var txtname = ( < HTMLTextAreaElement > document.getElementById("txtname"));
txtname.onclick = function()
{
if (txtname.value.length == 0)
{
txtname.onblur = function()
{
obj.ShowName();
};
} else
txtname.onfocus = function()
{
txtname.value = "";
};
}
};

Demo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Watermark_Demo.aspx.cs" Inherits="TextBox_Watermark_Effect.Watermark_Demo" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="app.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label2" runat="server" Font-Italic="True" Font-Size="Large" ForeColor="#006600" Text="Text Watermark in TypeScript"></asp:Label>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
<input id="txtname" type="text" value="Enter your name here"/>
<br />
<br />
</form>
<p>
</p>
</body>
</html>