Question

我制作了一些限制文本字段中字符数的jQuery。它工作正常，但欢迎任何优化。现在我的问题是，如果我想将它应用于多个文本字段，则存在冲突。冲突是当在任何文本字段中输入1个字符时，它会影响jQuery中指定的所有文本字段。

的jQuery

    function countChar(val) {
        var allowed_length = 20; // character count limit here
        var len = val.value.length;
        if (len >= allowed_length) {
            val.value = val.value.substring(0, allowed_length);
            jQuery('.chars-twenty').text(0);
        } else {
            jQuery('.chars-twenty').text(allowed_length - len);
        }
    }


    countChar(jQuery('#demo1').get(0));
    jQuery('#demo1').keyup(function() {
        countChar(this);
    })

    countChar(jQuery('#demo2').get(0));
            jQuery('#demo2').keyup(function() {
        countChar(this);
    })

我需要特定的textarea字符计数完全彼此分开。

非常感谢你。

Answer 1

它不是很干净，但你可以在prev（）元素中搜索类名：

    function countChar(val) {
        var allowed_length = 20; // character count limit here
        var len = val.value.length;
        if (len >= allowed_length) {
            val.value = val.value.substring(0, allowed_length);
            // Notice the change here:
            jQuery(val).prev().find(".chars-twenty").text(0);
        } else {
            // And here.
            jQuery(val).prev().find(".chars-twenty").text(allowed_length - len);
        }
    }


    countChar(jQuery('#demo1').get(0));
    jQuery('#demo1').keyup(function() {
        countChar(this);
    })

    countChar(jQuery('#demo2').get(0));
    jQuery('#demo2').keyup(function() {
        countChar(this);
    })

这是更新的小提琴：http://jsfiddle.net/6vrhkkat/1/

编辑：这是我要做的事情，假设您可以更改HTML。向span添加data属性以将其与特定textarea关联。这使您可以确保定位正确的范围，即使DOM更改也是如此。

<span class="chars-twenty" data-textarea="demo1">

然后使用jQuery访问正确的span：

jQuery(".chars-twenty[data-textarea="+val.id+"]").text('...');

另一个小提琴中的一个例子：http://jsfiddle.net/6vrhkkat/2/

Answer 2

根据您需要支持的浏览器，您可以简单地使用maxlength属性。它受Chrome，IE 10 +，Firefox 4 +，Opera 15+和Safari支持。

<textarea rows="3" id="demo1" maxlength="20"></textarea>

Answer 3

var maxLen = 20; // character count limit here

function countChar(jqObj) {
    var len = jqObj.val().length;
    var diff = maxLen - len;

    if (len > maxLen) {
        len = maxLen;
        diff = 0;
    }

    jqObj.val(jqObj.val().substr(0, len)).prev('p').find('span.chars-twenty').text(diff);
}

$(document).ready(function () {
    $("[id*='demo']").keyup(function () {
        countChar($(this));
    }).each(function () {
        countChar($(this));
    });
});

Working fiddle从OP分叉和修改。

jQuery - 需要两个元素才能使用相同的jQuery函数，但需要单独的结果

3 个答案: