Post
Ask Question

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
  1. class TxtWaterMark  
  2. {  
  3.  ShowName()  
  4.  { 
  5.   var n = ( < HTMLTextAreaElement > document.getElementById("txtname")).value;  
  6.   if (n == "")  
  7.   {  
  8.    ( < HTMLTextAreaElement > document.getElementById("txtname")).value = "Enter your name here";  
  9.   }  
  10.  }  
  11. }  
  12. window.onload = () =>  
  13.  {  
  14.   var obj = new TxtWaterMark();  
  15.   var txtname = ( < HTMLTextAreaElement > document.getElementById("txtname"));  
  16.   txtname.onclick = function()  
  17.   {  
  18.    if (txtname.value.length == 0)  
  19.    {  
  20.     txtname.onblur = function()  
  21.     {  
  22.      obj.ShowName();  
  23.     };  
  24.    } else  
  25.     txtname.onfocus = function()  
  26.    {  
  27.     txtname.value = "";  
  28.    };  
  29.   }  
  30.  };  
Demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Watermark_Demo.aspx.cs" Inherits="TextBox_Watermark_Effect.Watermark_Demo" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="app.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div>  
  12.                 <asp:Label ID="Label2" runat="server" Font-Italic="True" Font-Size="Large" ForeColor="#006600" Text="Text Watermark in TypeScript"></asp:Label>  
  13.                 <br />  
  14.                 <br />  
  15.                 <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>  
  16.   
  17.    
  18.                 <input id="txtname" type="text" value="Enter your name here"/>  
  19.                 <br />  
  20.                 <br />  
  21.             </form>  
  22.             <p>  
  23.   
  24.          </p>  
  25.         </body>  
  26.     </html>  
app.js
  1. var TxtWaterMark = (function() {  
  2.  function TxtWaterMark() {}  
  3.  TxtWaterMark.prototype.ShowName = function() {  
  4.   var n = (document.getElementById("txtname")).value;  
  5.   if (n == "") {  
  6.    (document.getElementById("txtname")).value = "Enter your name here";  
  7.   }  
  8.  };  
  9.  return TxtWaterMark;  
  10. })();  
  11. window.onload = function() {  
  12.  var obj = new TxtWaterMark();  
  13.  var txtname = (document.getElementById("txtname"));  
  14.  txtname.onclick = function() {  
  15.   if (txtname.value.length == 0) {  
  16.    txtname.onblur = function() {  
  17.     obj.ShowName();  
  18.    };  
  19.   } else {  
  20.    txtname.onfocus = function() {  
  21.     txtname.value = "";  
  22.    };  
  23.   }  
  24.  };  
  25. };  
  26. //@ sourceMappingURL=app.js.map  
Output 1
 
first-image.jpg
 
Output 2
 
Click on the Text Area.
 
after-click-on-textbox.jpg
 
Output 3
 
Enter a value:
after-click-on-textbox1.jpg
 
Output 4
 
Click anywhere on the form:
 
click-anywhere-on-form.jpg
 
Referenced By
http://www.typescriptlang.org/


Similar Articles