[jQuery] TextBox提示文字(浮水印文字)

效果:如果TextBox沒有輸入文字,就預設出現提示文字,呈現灰色字體。反之則取消效果。
   功能如同AJAX Toolkit的TextBoxWatermarkExtender

demo TextBox WaterMark

[html]<style type="text/css">
.waterMarkText
{
font-style:italic;
color:#CCCCCC;
}
</style>[/html]

[js]<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var nameTextBox = $(‘#<%=TextBox1.ClientID%>’); //ASP.Net
nameTextBox.focus(function () {
if (nameTextBox.val() == this.title) {
nameTextBox.removeClass("waterMarkText");
nameTextBox.val("")
}
});
nameTextBox.blur(function () {
if (nameTextBox.val() == "") {
nameTextBox.addClass("waterMarkText");
nameTextBox.val(this.title);
}
});
nameTextBox.blur();
});
</script>[/js]
[vb]<form id="form1" runat="server">
<div>
<asp:label id="Label1" runat="server" associatedcontrolid="TextBox1" text="Name:"></asp:label>
<asp:textbox id="TextBox1" runat="server" tooltip="Please Input Your Name" width="150px"></asp:textbox>
</div>
</form>[/vb]

DEMO:

Name:



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>