ウォーターマーク付きのjqueryテキストボックスを作成するには？

Question

私はjqueryの透かしでテキストボックスを作成しようとしていますが、私のAsp.netアプリケーションで作成することができましたが、単純なhtml WebページまたはPHPを使用できるnonasp.netバージョンを作成します。書面による申請。コードを変更しようとしましたが、機能しません。

（何それがないことは、透かしのテキストを入力の「タイトル」属性から来ている）

とにかくここに私の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

なぜあなたはちょうどthisを使用するカント++の大きな助けになると非常にappreciated.Thankでしょうか？そのjqueryプラグインとそれはASP.NETやPHPから独立しています。ブラウザでサポートされている場合はHTML5プレースホルダ属性が使用され、そうでない場合は他の方法で代替されます。

Answer 2

単純にplaceholder属性を使用できます。これは、HTML5に特有のものであり、私は質問が指定表示されませんでしたではない 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

は、別のSOの質問で取り上げIE9ための機能を、有効にします： Placeholder in IE9とInput placeholders for Internet Explorer

Answer 3

<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>