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。例如，它从 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 非常有用，但是如果我有多个文本并输入其中一个 textarea，则另一个 textarea 会使用与我输入的相同的值更新其计数器。

有人可以帮我找出我做错了什么吗？希望我只是在某个地方遗漏了一些简单的东西！

谢谢！

4

3 回答 3

4

你可以简化很多。首先将最大限制放在maxlength属性中：

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

然后，选择所有textarea具有maxlength属性的 s，并遍历它们：

$('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');

这里的麻烦是你的限制计数器必须是唯一的，你不能在一个页面上有两个具有相同 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 添加到缓存选择器中——因此您将获得更好的性能，但它完全是可选的。

于 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 回答