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").
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>
|
app.js
|
var TxtWaterMark = (function () {
function TxtWaterMark() { }
TxtWaterMark.prototype.ShowName = function
() {
var n = (document.getElementById("txtname")).value;
if(n == "") {
(document.getElementById("txtname")).value = "Enter your name here";
}
};
return TxtWaterMark;
})();
window.onload
= function () {
var obj = new TxtWaterMark();
var txtname =
(document.getElementById("txtname"));
txtname.onclick = function () {
if(txtname.value.length == 0) {
txtname.onblur = function () {
obj.ShowName();
};
} else {
txtname.onfocus = function () {
txtname.value = "";
};
}
};
};
//@ sourceMappingURL=app.js.map
|
Output 1
Output 2
Click on the Text
Area.
Output 3
Enter a value:
Output 4
Reference By
Comments
Post a Comment