نمایش Watermark Text برای TextBox، Password و MultiLine TextArea با استفاده از پلاگین جی کوئری در ASP.Net
با سلام در این مقاله به توضیح چگونگی استفاده از TextBox های Watermark در SingleLine، MultiLine و Password با استفاده از افزونه Watermark jQuery خواهیم پرداخت .
کد HTML
در کد HTML زیر، TextBox ها با TextMode متمایز یعنی SingleLine ، MultiLine و Password مانند TextBox Normal، TextArea و رمز عبور دارند. ویژگی ToolTip TextBox را تنظیم کرده ایم، متن در ویژگی ToolTip به عنوان متن Watermark نمایش داده خواهد شد.
UserName:
<asp:TextBox ID="txtUserName" runat="server" ToolTip="Enter UserName"></asp:TextBox><br />
Password:
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ToolTip="Enter Password"></asp:TextBox><br />
Email:
<asp:TextBox ID="txtEmail" runat="server" ToolTip="Enter Email"></asp:TextBox><br />
Details:
<asp:TextBox ID="txtDetails" runat="server" TextMode="MultiLine" ToolTip="Enter Details"></asp:TextBox>
اعمال علامت در TextBoxes
پلاگین Watermark jQuery را برای اعمال Watermark به تمامی انواع TextBoxes یعنی SingleLine، MultiLine و Password ایجاد کردیم.
<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 () {
$("[id*=txtUserName], [id*=txtPassword], [id*=txtDetails]").WaterMark();
//To change the color of Watermark
$("[id*=Email]").WaterMark({
WaterMarkTextColor: '#000'
});
});
</script>
پلاگین جی کوئری Watermark دارای WaterMarkTextColor اختیاری است که می تواند برای تنظیم رنگ متن Watermark استفاده شود.
کد صفحه HTML کامل در زیر ارائه شده است.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<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 () {
$("[id*=txtUserName], [id*=txtPassword], [id*=txtDetails]").WaterMark();
//To change the color of Watermark
$("[id*=Email]").WaterMark({
WaterMarkTextColor: '#000'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
UserName:
<asp:TextBox ID="txtUserName" runat="server" ToolTip="Enter UserName"></asp:TextBox><br />
Password:
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ToolTip="Enter Password"></asp:TextBox><br />
Email:
<asp:TextBox ID="txtEmail" runat="server" ToolTip="Enter Email"></asp:TextBox><br />
Details:
<asp:TextBox ID="txtDetails" runat="server" TextMode="MultiLine" ToolTip="Enter Details"></asp:TextBox>
</form>
</body>
</html>