In this article I will explain how to set Watermark Text for HTML INPUT fields like TextBox, Password and TextArea using jQuery Watermark plugin.
HTML Markup
In the below HTML Markup I have placed HTML INPUT TextBox, Password field and TextArea to capture the user input. You will notice that we added title attribute to all the fields, the text in the title attribute will be used to as the Watermark text.
UserName:
<inputtype="text"id="txtUserName"title="Enter UserName"/><br/>
Password:
<inputtype="password"id="txtPassword"title="Enter Password"/><br/>
Email:
<inputtype="text"id="txtEmail"title="Enter Email"/><br/>
Details:
<textarearows="3"cols="20"id="txtDetails"title="Enter Details"></textarea><br/>
Applying Watermark to HTML INPUT TextBox, Password and TextArea Fields
I have built the jQuery Watermark plugin to apply Watermark to INPUT TextBox, INPUT Password and TextArea fields.
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<scriptsrc="WaterMark.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function () {
$("#txtUserName, #txtPassword, #txtDetails").WaterMark();
$("#txtEmail").WaterMark({
WaterMarkTextColor: '#8B8B8B'
});
});
</script>
The Watermark jQuery plugin has an optional property WaterMarkTextColor which can be used to set the color of the Watermark text.
The complete page HTML markup is provided below
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<scriptsrc="WaterMark.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function () {
$("#txtUserName, #txtPassword, #txtDetails").WaterMark();
$("#txtEmail").WaterMark({
WaterMarkTextColor: '#8B8B8B'
});
});
</script>
</head>
<body>
UserName:
<inputtype="text"id="txtUserName"title="Enter UserName"/><br/>
Password:
<inputtype="password"id="txtPassword"title="Enter Password"/><br/>
Email:
<inputtype="text"id="txtEmail"title="Enter Email"/><br/>
Details:
<textarearows="3"cols="20"id="txtDetails"title="Enter Details"></textarea><br/>
</body>
</html>
Demo
Downloads