Question

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

这些字段最终都会被连接起来并用于短信环境中，其中有160个字符被截断。我需要用jQuery计算所有8个输入，以便向用户显示他们是否超过160个字符标记。

我可以很容易地使用任意数量的字符计数插件来做到这一点，但它们都是用单个textarea制作的，而不是分成多个输入。

我开始使用

构建它

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>

但它确实不起作用。如果您使用Delete键，它仍然计为总数的-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();

});

这允许我这样，当用户在字段中键入时，它显示了SMS在侧面的框中的外观示例。因此，如果我尝试使用K4emic的答案，那么它在很大程度上起作用，但在Office Phone和Mobile Phone上它会自动添加'o：'和'm：'所以我需要一些方法来收集这三个额外的字符同样。也许在输入写入段落之后计算段落的字符会更有意义，这样自动添加的字符也会计算在内？

Answer 1

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

Answer 2

为所有应该限制大小的字段注册侦听器并每次重新评估输入，这对我来说似乎是最明显的解决方案。请注意，在将输入插入输入字段后触发keyup回调函数，而keydown和keypress在更改之前触发。

var limited = $('.limited').keyup(function(event) {

    var length = 0;
    var contents = '';

    limited.each(function(index, element) {
        length += $(element).val().length;
        contents += $(element).val();
    });

    console.log(length);
    console.log($(this).val());
    console.log(contents);

});

Answer 3

我做了类似的事情，但最简单的方式我知道如何。当总数超过149个字符，然后超过160个字符时，我也做了总变化颜色。

<form id="form1" method="post" action="">
      <input onkeydown="updateDetails();" onkeyup="updateDetails();" type="text" name="company" id="company" />
      <input onkeydown="updateDetails();" onkeyup="updateDetails();" type="text" name="delivery" id="delivery" />
</form>
<div id="details-total">Details: 0 characters</div>


<script type="text/javascript">
<!--

function updateDetails() {
    var total1 = document.getElementById('company').value.length;
    var total2 = document.getElementById('delivery').value.length;
    var grandTotal = total1+total2;

    if (grandTotal < 150) {
        document.getElementById('details-total').innerHTML = '<span style="color: #20851e;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } else if (grandTotal < 161) {
        document.getElementById('details-total').innerHTML = '<span style="color: #ff7800;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } else {
        document.getElementById('details-total').innerHTML = '<span style="color: #fa0023; font-weight: bold;">Details: '+grandTotal+' characters (max 160)</span>'; 
    }
}

//-->
</script>

Answer 4

这似乎可以解决问题！

$('#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(); } else{ $('#in-officePhone').text('');} 
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); } else{ $('#in-mobilePhone').text('');} 
    $('#in-emailAddress').text($('#email').val()).show();
    $('#in-website').text($('#website').val()).show();

    var count = 0;
    $('p.count_me').each(function(i){
        count += $(this).text().length;
    });
    $('#credits-remain span').text(count);
    $('#character_count').val(count);

    if (count > 120) {
        $('#credits-remain span').addClass('lowChars');
        $('#credits-remain span').removeClass('outOfChars');
    } else if (count > 140) {
        $('#credits-remain span').addClass('outOfChars');
        $('#credits-remain span').removeClass('lowChars');
    } else {
        $('#credits-remain span').removeClass('lowChars');
        $('#credits-remain span').removeClass('outOfChars');
    }
});

多输入的jQuery字符计数器

4 个答案: