CODEWITHSUNDEEP
jqueryjquery-pluginsinputcharactercounter
LostInQuery
LostInQuery

Reputation: 519

jQuery Character Counter for Multiple Inputs

I have about 8 text inputs. They all get concatenated with PHP in the end, but for ease of use for the users, I broke it up into multiple "questions".

The fields all end up getting concatenated and used in an SMS enviroment where there is a 160 character cut off. I need to count all 8 inputs with jQuery to show the users if they go over that 160 character mark.

I can obviously very easily do this with any number of character counting plugins out there, but they are all made with a single textarea in mind, not broken up into multiple inputs.

I started to build this using 

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);

and the HTML something like

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

But it doesn't really work. If you use the Delete key, it still counts as a -1 to the total and there are a few other bugs. Is there a way to use the above code and have it work or is there a plugin that does this that I can't find or maybe someone has a better idea of what to try?

Thanks!!

/// * EDIT ** \*

My current jQuery is setup like this:

$('#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();

});

This allows me so that as the user types in the fields, it shows an example of what the SMS will look like in a box off to the side. So if I try to use K4emic's answer then it pretty much works for the most part, but on the Office Phone and Mobile Phone it automagically adds the 'o: ' and 'm: ' so I need some way of gathering those three extra characters as well. Maybe it would make more sense to count the characters of the paragraphs after the input writes to them so that the automagically added characters would be counted as well?

Upvotes: 2

Views: 2114

Answers (4)

Jayden Lawson
Jayden Lawson

Reputation: 2266

I did a similar thing to this, but in the simplest way I knew how. I also made the total change colour when the total was over 149 characters, then over 160 characters.

<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>

Upvotes: 1

LostInQuery
LostInQuery

Reputation: 519

This seems to do the trick!

$('#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');
    }
});

Upvotes: 0

K4emic
K4emic

Reputation: 419

Registering listeners for all the fields that should be limited in size and re-evaluating the input every time, seems like the most obvious solution to me. Note that the keyup callback function fires after the input has been inserted into the input field, while the keydown and keypress fires before the change is made.

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);

});

Upvotes: 1

eykanal
eykanal

Reputation: 27047

The easiest way I can think of is to simply create a hidden field, and dynamically change it's value to equal the concatenated string from the other eight fields. You could then just take the length of that field.

Upvotes: 1

Related Questions