用于多输入的 jQuery 字符计数器

Question

我有大约 8 个文本输入。它们最终都与 PHP 连接在一起，但为了方便用户使用，我将其分成多个“问题”。

所有字段最终都会连接起来并在 SMS 环境中使用，其中有 160 个字符被截断。我需要使用 jQuery 对所有 8 个输入进行计数，以便向用户显示他们是否超过了 160 个字符标记。

显然，我可以使用任意数量的字符计数插件轻松地做到这一点，但它们都是在考虑单个文本区域的情况下制作的，而不是分解为多个输入。

我开始使用

构建它

var current_count = parseInt($('#chars-remain span').text());

var regex=/^[a-zA-Z0-9\s]+$/;
if(regex.test($(this).val())){
    var current_left = current_count - 1;
}

if (current_left <= 0) {
    $('#chars-remain span').addClass('outOfChars');
} else {
    $('#chars-remain span').removeClass('outOfChars');
}
$('#chars-remain span').text(current_left);

HTML 类似

<p id="chars-remain"><span>160</span> Characters Remain</p>

但这并没有真正起作用。如果您使用删除键，它仍然算作-1，并且还有一些其他错误。 有没有办法使用上面的代码并让它工作，或者是否有一个插件可以做到这一点，但我找不到，或者也许有人对尝试什么有更好的想法？

谢谢!!

///* 编辑 **\*

我当前的 jQuery 设置如下:

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide(); 

    $('#in-firstName').text($('#first_name').val()).show();
    $('#in-lastName').text($('#last_name').val()).show();
    $('#in-titlePosition').text($('#job_title').val()).show();
    $('#in-company').text($('#company_name').val()).show();
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); }
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); }
    $('#in-emailAddress').text($('#email').val()).show();
    $('#in-website').text($('#website').val()).show();

});

这允许我在用户在字段中输入内容时，在旁边的框中显示短信的示例。因此，如果我尝试使用 K4emic 的答案，那么它在大多数情况下都有效，但在办公电话和移动电话上，它会自动添加“o:”和“m:”，所以我需要某种方法来收集这三个额外的字符以及。 也许在输入写入段落后计算段落的字符会更有意义，这样自动添加的字符也会被计算在内？

Answer 1

我能想到的最简单的方法是简单地创建一个隐藏字段，并动态更改它的值以等于其他八个字段的连接字符串。然后您可以只获取该字段的长度。