1

これを行うためにこの記事を入手しましたが、同じテキストボックスに複数のクラスを指定したため、これが機能していないことがわかりました。これを複数のクラスで動作するように変換する方法。セレクターを使用して作業する方法がわかりません。

こんな感じで使っています

<div class="inbox3full">
    <div class="threeinbg"><asp:TextBox ID="txtSortOrder" CssClass="threein water" 
            Text='<%# Bind("SortOrder") %>' runat="server" ToolTip="Type your Sort Order"></asp:TextBox></div>
</div>

jqueryを

<script type="text/javascript">
//    $(document).ready(function() { 
        $(function() {

            $(".water").each(function() {
                $tb = $(this);
                if ($tb.val() != this.title) {
                    $tb.removeClass("water");
                }
            });

            $(".water").focus(function() {
                $tb = $(this);
                if ($tb.val() == this.title) {
                    $tb.val("");
                    $tb.removeClass("water");
                }
            });

            $(".water").blur(function() {
                $tb = $(this);
                if ($.trim($tb.val()) == "") {
                    $tb.val(this.title);
                    $tb.addClass("water");
                }
            });
        });
   // });
    </script>

編集 システムが定義されていません。

.water{font-family: Tahoma, Arial, sans-serif;font-size:75%; color:black;}

<script type="text/javascript">
    $(document).ready(function() {
        $(".water").addClass('watermark');
        $(".watermark").live('focus', function() {
            $tb = $(this);
            if ($tb.val() == this.title) {
                $tb.val("");
                $tb.removeClass("water");
            }
        }).live('blur', function() {
            $tb = $(this);
            if ($.trim($tb.val()) == "") {
                $tb.val(this.title);
                $tb.addClass("water");
            }
        }).blur();​
    });

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
      $(".water").not(document.activeElement).blur();
    });
    </script>
4

1 に答える 1

2

likeの代わりに、次のようにハンドラーを起動.each()する方が簡単です( UpdatePanel に追加しているため、使用するように編集されています)。blur.live()

$(function() {
  $(".water").addClass("watermark");
  $(".watermark").live('focus', function() {
    $tb = $(this);
    if ($tb.val() == this.title) {
        $tb.val("");
        $tb.removeClass("water");
    }
  }).live('blur', function() {
    $tb = $(this);
    if ($.trim($tb.val()) == "") {
        $tb.val(this.title);
        $tb.addClass("water");
    }
  }).blur();​
});

ここで動作することがわかります。これにより、ボックスが最初に空だった場合に透かし/タイトルが挿入されます。これは通常、必要なものです。また、PanelPanel が終了したら、次のよう.blur()に、これらの要素を再度呼び出して、新しく作成された要素に透かしを適用する必要があります。

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
  $(".water").not(document.activeElement).blur();
});

これにより、ユーザーの入力を中断しないように、現在フォーカスされている要素を除くすべての要素がぼやけます。

于 2010-07-29T11:54:06.477 に答える