2012-03-03 4 views
1

jQuery.watermarkプラグインが適用されたテキストフィールドとUpdatePanel内のAutoPostbackがtrueに設定されたDropdownListを配置すると、ウォーターマークはテキストフィールドからクリアされませんドロップダウンリストが変更されました。UpdatePanelでDropdownListを使用するときにウォーターマークがサーバーに投稿される

テキストフィールドのウォーターマークが、正しくないテキストフィールドの値としてサーバーに送信されます。 UpdatePanelを使用しない場合、ウォーターマーク値はプラグインのフォーム送信コードによって正しくクリアされます。

私が問題を集めることから、DropdownList用に生成されたポストバックは、プラグインが透かし値をクリアする方法であるフォームのサブミットイベントハンドラをバイパスしてJavaScriptで完全に行われるということです。様々なASP.NET AJAX JavaScript eventsは、投稿の本体が作成された後にすべて起動されるので、ウォーターマークを削除するためには使用できません。これを行うには他の方法がありますか?

これは、プレースホルダ属性をネイティブにサポートしていないブラウザ(IE9以下など)にのみ適用されます。

私はraised this as a bug for the plugin hereです。


    <form id="form1" runat="server"> 
    <asp:ScriptManager runat="server" /> 
    <div> 
     Demonstration. 
     <br /> 
     <br /> 
     Note: This is only a problem for browsers that do not have have text field placeholder support. Most notabily Internet Explorer 9 and below. 
     <ol> 
      <li>The text field has a watermark 'wattery' applied to it</li> 
      <li>The dropdown list is set to auto postback</li> 
      <li>When you change the dropdown list the watermark is not removed and is posted to the server as the value of the text field</li> 
      <li>When you click either the button or the link the watermark is removed as these actions trigger the 'beforeunload' event.</li> 
     </ol> 
     <asp:UpdatePanel runat="server"> 
      <ContentTemplate> 
       <asp:TextBox runat="server" ID="txt" /> 
       <asp:DropDownList runat="server" ID="ddl" AutoPostBack="true" 
        onselectedindexchanged="ddl_SelectedIndexChanged"> 
        <asp:ListItem Text="one" /> 
        <asp:ListItem Text="two" /> 
       </asp:DropDownList> 
       <asp:Button Text="Click me 1" runat="server" /> 
       <asp:LinkButton Text="Click me 2" runat="server" /> 
       <br /> 
       <br /> 

       Value from text field after postback = '<asp:Label Text="" runat="server" ID="lbl" />' 
      </ContentTemplate> 
     </asp:UpdatePanel> 
    </div> 
    </form> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" ></script> 
    <script type="text/javascript" src="js/jquery.watermark.js" ></script> 
    <script type="text/javascript"> 

     $().ready(function() { 
      $('#<%=txt.ClientID %>').watermark("wattery"); 
     }); 

    </script>
protected void ddl_SelectedIndexChanged(object sender, EventArgs e) 
{ 
    lbl.Text = txt.Text; 
} 

答えて

0

かなり古いスレッドが、最近、この問題を持っていた:これを再現する

コード。ここに私が思いついた何かがあります。

注:100%テストされていませんが、その行に沿ったものが有効です。