0

次のテキストエリアがあります。

<asp:TextBox ID="TxtBox200" runat="server" 
        TextMode="MultiLine" MaxLength="200" ></asp:TextBox>
<span id="charCount"></span>

次の JavaScript が機能しないのはなぜですか。

<script>
    $('#TxtBox200').keypress(function() {
    var max = 200;
    var textLen = $(this).val().length;
    var textLeft = max - textLen;
    $('#charCount').text(
        textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
    );
});
</script>

編集：バックスペースに対応する方法はありますか（したがって、残りの文字数は増えません）？

4

5 に答える 5

4

C# 4+ を使用している場合は、おそらくClientIDMode = Staticそれを機能させるために使用する必要があります。そうしないと、ID が asp.net レンダリング エンジンによって変更され、変更されません。TxtBox200

<asp:TextBox ID="TxtBox200" runat="server" ClientIDMode="Static"
    TextMode="MultiLine" MaxLength="200" >

C# < 4 を使用していて、JavaScript コードがインラインである場合は、@Sean Bright の回答を使用してください。分離された js ファイルにある場合は、id をパラメーターとして渡すか、css クラスをセレクターとして使用する必要があります。

<asp:TextBox ID="TxtBox200" runat="server" ClientIDMode="Static"
    TextMode="MultiLine" MaxLength="200" CssClass="TxtBox200" >

そしてあなたのセレクターは

$('input.TxtBox200').keypress(function() {...}
于 2013-07-19T12:24:35.733 に答える
3

生成された HTML では、TxtBox200実際には呼び出されないためTxtBox200です。代わりにこれを試してください：

$('<%= TxtBox200.ClientID %>').keypress(function() {
于 2013-07-19T12:24:43.320 に答える
1

window.load イベントに JavaScript コードを含めてみてください

<script>
  $(document).ready(function (e) {
    $('#TxtBox200').keypress(function() {
    var max = 200;
    var textLen = $(this).val().length;
    var textLeft = max - textLen;
    $('#charCount').text(
        textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
    );
});
 });
</script>
于 2013-07-19T12:25:09.493 に答える
0

したがって、2 つの問題があります。

まず、jQuery キープレス関数は DOM Ready イベント内にないため、利用可能になる前にテキストボックスにバインドしようとしているため、代わりに次のようにスクリプトを記述します。

$(document).ready(function() {
        $('#<%= TxtBox200.ClientID %>').keypress(function(e) {
            alert('Key pressed.');
            var max = 200;
            var textLen = $(this).val().length;
            var textLeft = max - textLen;
            $('#charCount').text(
                textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
            );
        });
    });

次に、jQuery セレクターで ASP.NET サーバー コントロールを別の方法で参照する必要があります。これは、ASP.NET が既定で階層的な命名規則 (つまり、MainContent_ctl100) を適用するためです。次のように、ASP.NET サーバー コントロールに強制的にクライアント名を静的にすることができます。

<asp:TextBox ID="TxtBox200" runat="server" 
             TextMode="MultiLine" MaxLength="200" ClientIDMode="Static" ></asp:TextBox>

これにより、TextBoxの ID が作成され、jQuery セレクターでTxtBox200参照されます。.ClientID

于 2013-07-19T12:39:08.787 に答える