0
我试图建立与jquery水印的文本框，我能够在我的Asp.net应用程序中创建，但我想要做的就是创建一个non-asp.net版本，我可以用简单的HTML网页或PHP书面申请。我试图改变代码，但它不起作用。如何用水印创建一个jQuery文本框？
（它所做的是水印的文字来自于“标题”输入的属性）
反正这里是我的asp.net代码：
代码aspx页面：
<div id="TableWrapper">
<table class="style1" runat="server" id="FormTable">
<tr>
<td colspan="3">
<h1>Get in touch with us</h1>
<p>Use the form below to get in touch with us. Enter your name, e-mail address, and your home or business phone number to get in touch with us.</p>
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<asp:TextBox ID="Name" runat="server" ToolTip="Enter your name" CssClass="InputBox"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="Name" CssClass="ErrorMessage" ErrorMessage="Enter your name">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
E-mail address
</td>
<td>
<asp:TextBox ID="EmailAddress" runat="server" ToolTip="Enter your e-mail address" CssClass="InputBox"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="EmailAddress" CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Enter an e-mail address">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="EmailAddress" CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Enter a valid e-mail address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
E-mail address again
</td>
<td>
<asp:TextBox ID="ConfirmEmailAddress" runat="server" ToolTip="Confirm your e-mail address" CssClass="InputBox"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ConfirmEmailAddress" CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Confirm the e-mail address">*</asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="EmailAddress" ControlToValidate="ConfirmEmailAddress" CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Retype the e-mail address">*</asp:CompareValidator>
</td>
</tr>
<tr>
<td>
Home phone number
</td>
<td>
<asp:TextBox ID="PhoneHome" runat="server" ToolTip="Enter your home phonenumber" CssClass="InputBox"></asp:TextBox>
</td>
<td>
<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="ValidatePhoneNumbers" CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Enter your home or business phone number" OnServerValidate="HomePhoneCustom_ServerValidate">*</asp:CustomValidator>
</td>
</tr>
<tr>
<td>
Business phone number
</td>
<td>
<asp:TextBox ID="PhoneBusiness" runat="server" ToolTip="Enter your business phonenumber" CssClass="InputBox"></asp:TextBox>
</td>
<td>
</td>
</tr>
<tr>
<td>
Comments
</td>
<td>
<asp:TextBox ID="Comments" runat="server" Height="78px" TextMode="MultiLine" ToolTip="Enter your comment here" CssClass="InputBox"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="Comments" CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Enter a comment">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="SendButton" runat="server" Text="Send" OnClick="Send_Click" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="ErrorMessage" HeaderText="Please correct the following errors before you press the Send button:" />
</td>
</tr>
</table>
</div>
<asp:Label ID="Message" runat="server" Text="Message Sent" Visible="False" CssClass="Attention" />
<p runat="server" id="MessageSentPara" visible="false">Thank you for your message.
We’ll get in touch with you if necessary.</p>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="PleaseWait">Please Wait... </div>
</ProgressTemplate>
</asp:UpdateProgress>
<script src="../Scripts/jquery.updnWatermark.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/*
$(':input[type=text], textarea').each //selector
(
function() { //function
var newText = 'Please enter your ' +$(this).parent().prev().text().toLowerCase().trim(); //gets the text of the previous element
$(this).attr('value', newText);
}).one('focus', function(){ //one will be done once, //.bind works for everytime the event is invoked
this.value = '', this.className = ''}).addClass('Watermark').css('width', '300px'); //alternate this.class ''
*/
/*
Notice how there’s no need to select any items; you just call the updnWatermark method on the jQuery
object (using its $ shortcut) without specifying any selectors. The updnWatermark method then scans
the form looking for form fields that have a title attribute. You can optionally pass in a CSS class that
defines the presentation of the text labels. In this example, the .Watermark and .Watermark label
selectors define the position and color of the watermark text that is placed on top of the text boxes.
*/
$.updnWatermark.attachAll({ cssClass: 'Watermark' });
$('form').bind('submit', function()
{
if (Page_IsValid)
{
$('#TableWrapper').slideUp(3000);
}
});
});
/* === pageLoad ===
pageLoad() is called after every UpdatePanel refresh
In the case of initialization code that should run once, $(document).ready() is the ideal solution.
The pageLoad method (which is part of the client-side ASP.NET AJAX Library) serves the same
purpose as jQuery’s document ready, with one exception: it also fires after a partial page update,
which is what takes place after you submit the form because of the UpdatePanel in the user control.
*/
function pageLoad()
{
$('.Attention').animate({ width: '600px' }, 3000).
animate({ width: '100px' }, 3000).fadeOut('slow');
}
</script>
下面是jQuery的水印代码：
/*
* jQuery Watermark Plugin (v1.0.0)
* http://updatepanel.net/2009/04/17/jquery-watermark-plugin/
*
* Copyright (c) 2009 Ting Zwei Kuei
*
* Dual licensed under the MIT and GPL licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.opensource.org/licenses/gpl-3.0.html
*/
(function($) {
$.fn.updnWatermark = function(options) {
options = $.extend({}, $.fn.updnWatermark.defaults, options);
return this.each(function() {
var $input = $(this);
// Checks to see if watermark already applied.
var $watermark = $input.data("updnWatermark");
// Only create watermark if title attribute exists
if (!$watermark && this.title) {
// Inserts a span and set as positioning context
var $watermark = $("<span/>")
.addClass(options.cssClass)
.insertBefore(this)
.hide()
.bind("show", function() {
$(this).children().fadeIn("fast");
})
.bind("hide", function() {
$(this).children().hide();
});
// Positions watermark label relative to positioning context
$("<label/>").appendTo($watermark)
.text(this.title)
.attr("for", this.id);
// Associate input element with watermark plugin.
$input.data("updnWatermark", $watermark);
}
// Hook up blur/focus handlers to show/hide watermark.
if ($watermark) {
$input
.focus(function(ev) {
$watermark.trigger("hide");
})
.blur(function(ev) {
if (!$(this).val()) {
$watermark.trigger("show");
}
});
// Sets initial watermark state.
if (!$input.val()) {
$watermark.show();
}
}
});
};
$.fn.updnWatermark.defaults = {
cssClass: "updnWatermark"
};
$.updnWatermark = {
attachAll: function(options) {
$("input:text[title!=''],input:password[title!=''],textarea[title!='']").updnWatermark(options);
}
};
})(jQuery);
什么我计划在我的简单的HTML页面会是这样的：
<input type="text" class="TheWaterMarkjquery" title="TheWatermark"/>
<script type="text/javascript">
$(function(){
$.updnWatermark.attachAll({ cssClass: 'Watermark' });
});
我真的不知道是否有可能使用这种方法，但我希望我可以使用此解决方案。
先生/女士你的答案会有很大的帮助，是非常appreciated.Thank你++
你为什么不只是使用CSS>'背景image'这个？ – 2012-02-19 18:46:48
我猜你错过了'.Watermark'或'.updnWatermark'的CSS代码。无论您在非APS.Net应用程序中使用什么。 – Alexander 2012-02-19 20:19:29