Question

我不确定标题是否正确。我似乎无法用语言恰当地表达这个问题！

我的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。例如，它从HTML limit-200中的类名获取字符限制。然后计算键入时剩余的字符数，并输出textarea下的剩余字符。

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>');
    });
});

这适用于单个textarea，但如果我有多个textareas并输入其中一个textareas，则另一个textarea更新其计数器的值与我输入的值相同。

有人可以帮我看看我做错了吗？希望我在某个地方错过了一些简单的东西！

谢谢！

Answer 1

你可以简化这个很多。首先将最大约束放在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');
});

在此处查看：[{3}}

Answer 2

我已将此添加到小提琴中并完成修改：

http://jsfiddle.net/KQKnN/

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

在这里，您的限制计数器必须是唯一的，在一个页面上不能有两个具有相同ID的元素。

        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添加到缓存选择器中 - 因此你会获得更好的性能，但它完全是可选的。

Answer 3

就你的具体问题而言，我认为这一行和else中的那一行是罪魁祸首：

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

应该是：

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

这有帮助吗？

如何让这个jQuery脚本在多个元素上单独运行

3 个答案: