具有相同类名的Jquery多个字符计数

Jquery Multiple Character Counts With The Same Class Name

本文关键字：字符 Jquery 同类      更新时间：2023-09-26

我正在尝试在同一网页上有多个文本区域，这些文本区域将计算其字符数，它们将需要相同的类名。问题是，我只能输入第一个文本区域，而不能输入其他文本区域，但第一个文本区的字符数会影响其他文本区，因为每个文本区都有相同的类名，我需要弄清楚如何让每个字符数只影响最接近的文本区。例如，当我在第一个文本区域字段中键入时，所有文本区域字段的字符数都会受到影响。我想知道如何在不更改textareas类名的情况下阻止这种情况的发生？

这是JSFiddlehttps://jsfiddle.net/2dytq9bj/

HTML

        <article class="review">
            <div class="review-details">
                <div class="review-stats">
                    <!-- content -->
                </div>
                <form method="post" action="" class="review-form">
                    <fieldset>
                        <ol>
                            <li><label for="review-info">Review Info:</label></li>
                            <li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
                        </ol>
                    </fieldset>
                    <fieldset>  
                        <ol>
                            <li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
                        </ol>
                    </fieldset>
                </form>
            </div>
        </article>

        <article class="review">
            <div class="review-details">
                <div class="review-stats">
                    <!-- content -->
                </div>
                <form method="post" action="" class="review-form">
                    <fieldset>
                        <ol>
                            <li><label for="review-info">Review Info:</label></li>
                            <li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
                        </ol>
                    </fieldset>
                    <fieldset>  
                        <ol>
                            <li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
                        </ol>
                    </fieldset>
                </form>
            </div>
        </article>

        <article class="review">
            <div class="review-details">
                <div class="review-stats">
                    <!-- content -->
                </div>
                <form method="post" action="" class="review-form">
                    <fieldset>
                        <ol>
                            <li><label for="review-info">Review Info:</label></li>
                            <li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
                        </ol>
                    </fieldset>
                    <fieldset>  
                        <ol>
                            <li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
                        </ol>
                    </fieldset>
                </form>
            </div>
        </article>

Jquery

$(document).ready(function() {
    function countCharacters( input, output, max ) {
        var $input = $(input);
        var $output = $(output);
        $output.text(max + ' characters left');
        $input
            .keydown(function(event) {
                if (event.keyCode != 8 &&
                    event.keyCode != 46 &&
                    $input.val().length >= max)
                    event.preventDefault();
            })
            .keyup(function() {
                var val = $input.val().slice(0, max);
                var left = max - val.length;
                $input.val(val);
                $output.text(left + ' characters left');
            });
    }
    countCharacters('.review-info', '.review-info + div .count', 5000);
});

CSS

*{
  border: 0;
  margin: 0;
  padding: 0;
}
article{
  margin-top: 1em;  
}
textarea{
  width: 90%;
}
input{
  margin: 1em 0;
  color: green;
}

我所做的是将keydown事件绑定到每个.review-info类，这样我就可以从函数上下文中获得它，它引用了我实际写入的文本区域。

$(document).ready(function() {
    function countCharacters(e) {
        var $input = $(this);
        var maxLetters = $input.attr('data-max')
        var inputLength = $input.val().length
        var $output = $('+ div', this);
        $output.text((maxLetters - inputLength) + ' characters left');
        if (e.keyCode != 8 &&
            event.keyCode != 46 && 
            $input.val().length >= maxLetters){
                event.preventDefault();
        }
    }

    $('.review-info').keydown(countCharacters);
});

文本区域的最大长度现在取自html数据的最大属性，所以你可以为每个文本区域设置不同的大小。

https://jsfiddle.net/2dytq9bj/1/

我想这可能会对你有所帮助，我已经改变了你的方式。但我想这会让你对自己想要实现的目标有一些想法。

JQuery

$(document).ready(function() {
  var max = 10;
  $(".count").text(max + " characters left");
$(".review-info").keyup(function() {
    var curTextarea = $(this);
    var curCount = curTextarea.val().length;
    var charLeft = max - curCount;
    if (charLeft >= 0) {
      curTextarea.next().children(".count").text(charLeft + ' characters left');
      $(this).next().children(".count").css("color", "black");
    } else {
      this.value = this.value.substring(0, max);
      $(this).next().children(".count").css("color", "red");
    }
  }); //Keyup Function Ends
}); //Doc Ready Ends

工作：Fiddle

相关文章：