In this article I will explain how to set Watermark Text for HTML INPUT fields like TextBox, Password and TextArea using jQuery Watermark plugin.
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 :
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="WaterMark.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtUserName, #txtPassword, #txtDetails").WaterMark();
$("#txtEmail").WaterMark({
WaterMarkTextColor: '#8B8B8B'
});
});
</script>
</head>
<body>
UserName:
<input type="text" id="txtUserName" title="Enter UserName"/><br/>
Password:
<input type="password" id="txtPassword" title="Enter Password"/><br/>
Email:
<input type="text" id="txtEmail" title="Enter Email"/><br/>
Details:
<textarea rows="3"cols="20" id="txtDetails" title="Enter Details"></textarea><br/>
</body>
</html>
Output :
Once cursor moves on Textbox , shows watermark text like " Enter UserName " as shown below :
No comments:
Post a Comment