3

タイトルが正しいかどうかはわかりません。この問題は言葉ではうまく言い表せません！

入力できる文字数を制限しようとしている HTML に次のテキスト フィールドがあります。

<div class="limited limit-200">
    <div class="label">
        <label for="_je_industries_desc">Industry Description</label>
    </div>
    <div class="input">
        <textarea class="large-text" name="industries_desc" id="industries_desc" cols="60" rows="3"></textarea>
        <p id="industries_desc_description" class="description">Put a short description of this industry.</p>
    </div>
</div>
<div class="limited limit-100">
    <div class="label">
        <label for="_je_seo_description">Meta Description</label>
    </div>
    <div class="input">
        <textarea class="large-text" name="seo_description" id="seo_description" cols="60" rows="3"></textarea>
        <p id="seo_description_description" class="description">Put a short description of the content of this page.</p>
    </div>
</div>

これまでの私のjQueryは次のとおりです。limit-200たとえば、HTML のクラス名から文字制限を取得します。次に、入力した残りの文字数を計算し、テキストエリアの下に残りの文字を出力します。

jQuery(document).ready(function(){
    jQuery('.limited').each(function() {
        // Get the class names of any element that has the class .limited
        var className = jQuery(this).attr('class');

        // Use regex to capture the character limit class (limit-#)
        var limit = className.match(/[?:limit-](\d+)/);

        // Set the limit var to the match from the regex
        var limit = limit[1];

        // Calculate the number of characters that are still available (limit - characters in field)
        var chars_left = limit - jQuery('textarea', this).val().length;

        //alert(chars_left);

        // Attach an event handler to each textarea with the class .limited
        jQuery('textarea', this).on('keyup', function() {
            var maxchar = limit;
            var cnt = jQuery(this).val().length;
            var remainingchar = maxchar - cnt;
            if(remainingchar < 0){
                jQuery('#limit-counter span').html('<strong>0</strong>');
                jQuery(this).val(jQuery(this).val().slice(0, limit));
            } else {
                jQuery('#limit-counter span').html('<strong>' + remainingchar + '</strong>');
            }
        });

        // Display number of characters left
        jQuery('textarea', this).after('<span id="limit-counter">Remaining characters: <span><strong>' + chars_left + '</strong></span></span>');
    });
});

これは単一のテキストエリアにはうまく機能しますが、複数のテキストエリアがあり、いずれかのテキストエリアに入力すると、他のテキストエリアは、入力しているものと同じ値でカウンターを更新します。

誰かが私が間違っていることを見つけるのを手伝ってくれませんか? うまくいけば、どこかで単純なものが欠けているだけです!

ありがとう！

4

3 に答える 3

4

これを大幅に簡略化できます。maxlength属性に最大の制限を設定することから始めます。

<textarea name="seo_description" maxlength="100"></textarea>

次に、属性textareaを持つすべてのを選択しmaxlength、それらをループします。

$('textarea[maxlength]').each(function() {
    var $this = $(this),
        limit = $this.attr('maxlength'),
        $counter = $('<span class="limit-counter">Remaining characters: <strong></strong></span>')
                    .insertAfter(this).find('strong');

    $this.on('keyup', function() {
        $counter.text( limit - $this.val().length );
    })
    .trigger('keyup');
});

ここで実際に見てください：http：//jsfiddle.net/U4Mk6/

于 2013-01-04T15:31:04.180 に答える
2

これをフィドルに追加し、変更を加えました。

http://jsfiddle.net/KQKnN/

    var $textarea=jQuery(this).find('textarea');
    var uniqueId= $textarea.attr('id');

ここで問題となるのは、制限カウンターが一意である必要があるためです。1つのページに同じIDを持つ2つの要素を含めることはできません。

        if(remainingchar < 0){
            jQuery('#limit-counter-'+uniqueId+' span').html('<strong>0</strong>');
            jQuery(this).val(jQuery(this).val().slice(0, limit));
        } else {
            jQuery('#limit-counter-'+uniqueId+' span').html('<strong>' + remainingchar + '</strong>');
    // .....

    $textarea.after('<span id="limit-counter-'+uniqueId+'">Remaining characters: <span><strong>' + chars_left + '</strong></span></span>');

また、キャッシュされたセレクターにtextareaを追加しました。これによりパフォーマンスが向上しますが、これは完全にオプションです。

于 2013-01-04T15:30:46.010 に答える
0

あなたの特定の問題に関する限り、この行とその中の行が原因だと思いますelse：

jQuery('#limit-counter span').html('<strong>0</strong>');

次のようになります。

jQuery('#limit-counter span', this).html('<strong>0</strong>');

これは役に立ちますか？

于 2013-01-04T15:34:06.510 に答える