如何创建带水印的 jquery 文本框？

Question

我正在尝试创建一个带有 jquery 水印的文本框，我可以在我的 Asp.net 应用程序中创建，但我想做的是创建一个非 asp.net 版本，我可以使用简单的 html 网页或PHP 编写的应用程序。我尝试更改代码，但它不起作用。

（它的作用是水印的文字来自输入的'title'属性）

无论如何，这是我来自 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' });

});

我不确定是否可以使用这种方法，但我希望我可以使用这种解决方案。

先生/女士，您的回答将非常有帮助，我们将不胜感激。谢谢您++

Answer 1

<input type="text" id="Name">


<script>
$(document).ready(function () {
    // On page load, apply watermark to input
    $('#Name').dwaterm();
});
</script>


<script>
(function ($) 
    $.fn.extend({
        dwaterm: function () {
            // Add watermark to textbox

            return this.each(function () {

                // Define what happens when the textbox comes under focus
                // Remove the watermark class and clear the box
                var obj = $(this);
                $(this).focus(function () {

                    $(this).filter(function () {

                        // We only want this to apply if there's not
                        // something actually entered
                        return $(this).val() == "" || $(this).val() == "Type here"

                    }).removeClass("watermarkOn").val("");

                });
                // Define what happens when the textbox loses focus
                // Add the watermark class and default text
                $(this).blur(function () {

                    $(this).filter(function () {

                        // We only want this to apply if there's not
                        // something actually entered
                        return $(this).val() == ""

                    }).addClass("watermarkOn").val("Type here");

                });


            });
        }
    });
})(jQuery);
</script>

Answer 2

为什么不能只使用this？它的 jquery 插件，它独立于 ASP.NET 或 PHP。如果浏览器支持，它将使用 HTML5 占位符属性，否则将回退到其他方式。

Answer 3

您可以简单地使用placeholder 属性。这是 HTML5 特有的，我没有看到指定 not HTML5:

的问题

 <fieldset>
  <legend>Mail Account</legend>
  <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p>
  <p><label>Address: <input type="email" name="address" placeholder="john@example.net"></label></p>
  <p><label>Password: <input type="password" name="password"></label></p>
  <p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
 </fieldset>

更多信息可以在这里找到：w3.org placeholder attribute

启用 IE9 的功能，在另一个 SO 问题中介绍：Placeholder in IE9 和 Input placeholders for Internet Explorer