Javascript 同一页面上多个文本区域的字符限制倒计时？

目前，我正试图在twitter文本区创建基本相同类型的倒计时。它确实适用于第一个文本区域，但当我开始在第一个文本区域中键入时，它会复制所有帖子剩余的相同数量的字符

我需要知道的是，如何获得仅用于当前文本区域的剩余字符

HTML:

@.$post['username'..”

jQuery：

function updateCountdown() {

    var remaining = 140 - $('.newComment').val().length;
    $('.countdown').text(remaining + ' characters remaining');

    if(remaining < 0){

        $(this).siblings('.postComment').hide(500);

    }else{

        $(this).siblings('.postComment').show(500);
        if(remaining <= 10){
            $(this).siblings('.countdown').css("color","red");
        }else{
            $(this).siblings('.countdown').css("color","black");
        }
    }
}

$('.newComment').change(updateCountdown);
$('.newComment').keyup(updateCountdown);

函数updateCountdown（）{
剩余var=140-$（'.newComment'）.val（）.length；
$（“.countdown”）.text（剩余+剩余字符”）；
如果（剩余<0）{
$（this）.兄弟姐妹（'.postComment'）.hide（500）；
}否则{
$（this.sides（'.postComment'）.show（500）；
如果（剩余尝试这样的方法

HTML



JS

$（文档）.ready（函数（）{
$（'textarea'）。在（“propertychange键控输入粘贴”，
函数（）{
var limit=$（此）.data（“limit”）；
var remainingChars=limit-$（this）.val（）.length；
if（remainingChars我的版本有点冗长，但它可以工作，并且不需要textarea上的数据限制属性（或任何其他属性）。在我的例子中，我正在与jQuery和CMS的一个古老版本作斗争，它有自己的表单生成器，并且限制了对页面HTML的访问

以下是HTML：

<div id="counter">myTextArea</div>
<textarea id="myTextarea" rows="2" cols="30">   </textarea>

<div id="counter2">myTextArea2</div>
<textarea id="myTextarea2" rows="2" cols="30"></textarea>

myTextArea
MyTextArea 2

下面是jQuery：

$(document).ready(function() {
    // set the IDs for the text areas and counters
    // handy for aliasing long, CMS-generated IDs
    var myTextarea = 'myTextarea';
    var counter = 'counter';
    var myTextarea2 = 'myTextarea2';
    var counter2 = 'counter2';

    $('#' + myTextarea).keyup(function () {
        var charLimit = 150; 
        var remainingChars = charLimit - $(this).val().length;
        if (remainingChars < 0) {
            // trim input, if necessary
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, charLimit));
            var tlength = $(this).val().length;
            remain = parseInt(tlength);
            $('#myTextarea').text(remain);
        }
        $('#' + counter).text('(' + remainingChars + ' characters left)');
    });
    $('#' + myTextarea2).keyup(function () {
        var charLimit = 150; 
        var remainingChars = charLimit - $(this).val().length;
        if (remainingChars < 0) {
            // trim input, if necessary
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, charLimit));
            var tlength = $(this).val().length;
            remain = parseInt(tlength);
            $('#myTextarea2').text(remain);
        }
        $('#' + counter2).text('(' + remainingChars + ' characters left)');
    });
});

$（文档）.ready（函数（）{
//设置文本区域和计数器的ID
//方便使用CMS生成的长ID别名
var myTextarea='myTextarea'；
变量计数器='计数器'；
var myTextarea2='myTextarea2'；
var counter2=‘counter2’；
$（'#'+myTextarea）.keyup（函数（）{
var-charLimit=150；
var remainingChars=charLimit-$（this）.val（）.length；
如果（剩余字符数<0）{
//如有必要，微调输入
var tlength=$（this）.val（）.length；
$（this.val（$（this.val（）.substring（0，charLimit））；
var tlength=$（this）.val（）.length；
剩余=parseInt（t长度）；
$（“#myTextarea”）.text（保留）；
}
$（“#”+计数器）.text（“（“+remaingchars+”左字符）”；
});
$（'#'+myTextarea2）.keyup（函数（）{
var-charLimit=150；
var remainingChars=charLimit-$（this）.val（）.length；
如果（剩余字符数<0）{
//如有必要，微调输入
var tlength=$（this）.val（）.length；
$（this.val（$（this.val（）.substring（0，charLimit））；
var tlength=$（this）.val（）.length；
剩余=parseInt（t长度）；
$（#myTextarea2'）。文本（保留）；
}
$（“#”+计数器2）.text（“（“+remaingchars+”字符左）”；
});
});

以下是JSFIDLE：

$（此）
是
文本区域
，您的代码片段已经有了引用相关
所需的确切代码。倒计时
span
。函数的前两行引用了与这些类匹配的所有元素，请使用
this
更改此选项，以仅选择当前元素。我知道，但我已经尝试过t这些都是解决方案，但不幸的是，当我开始打字时，它什么也没有显示。很好的一个，谢谢：）
    $(document).ready(function () {
    $('textarea').on("propertychange keyup input paste",

    function () {
        var limit = $(this).data("limit");
        var remainingChars = limit - $(this).val().length;
        if (remainingChars <= 0) {
            $(this).val($(this).val().substring(0, limit));
        }
        $(this).next('span').text(remainingChars<=0?0:remainingChars);
    });
});

<div id="counter">myTextArea</div>
<textarea id="myTextarea" rows="2" cols="30">   </textarea>

<div id="counter2">myTextArea2</div>
<textarea id="myTextarea2" rows="2" cols="30"></textarea>

$(document).ready(function() {
    // set the IDs for the text areas and counters
    // handy for aliasing long, CMS-generated IDs
    var myTextarea = 'myTextarea';
    var counter = 'counter';
    var myTextarea2 = 'myTextarea2';
    var counter2 = 'counter2';

    $('#' + myTextarea).keyup(function () {
        var charLimit = 150; 
        var remainingChars = charLimit - $(this).val().length;
        if (remainingChars < 0) {
            // trim input, if necessary
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, charLimit));
            var tlength = $(this).val().length;
            remain = parseInt(tlength);
            $('#myTextarea').text(remain);
        }
        $('#' + counter).text('(' + remainingChars + ' characters left)');
    });
    $('#' + myTextarea2).keyup(function () {
        var charLimit = 150; 
        var remainingChars = charLimit - $(this).val().length;
        if (remainingChars < 0) {
            // trim input, if necessary
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, charLimit));
            var tlength = $(this).val().length;
            remain = parseInt(tlength);
            $('#myTextarea2').text(remain);
        }
        $('#' + counter2).text('(' + remainingChars + ' characters left)');
    });
});