Count characters/sms using jQuery

Question

I count characters using NobleCount and the following code:

$(\'#message\').NobleCount(\'#messageInfo\',{
            max_chars: getMaxChars(),
            o         


        

Answer 1

I updated the script (for my purposes) to include the subject in the count as well. This is what I came up with:

$(document).ready(function(){
var $remaining = $('#remaining'),
    $messages = $remaining.next();

$('#message').keyup(function(){
    var chars = this.value.length + document.getElementById('subject').value.length,
        messages = Math.ceil(chars / 160),
        remaining = messages * 160 - (chars % (messages * 160) || messages * 160);

    $remaining.text(remaining);
    //$remaining.text(remaining + ' characters remaining');
    //$messages.text(messages + ' message(s)');
});

$('#subject').keyup(function(){
    var chars = this.value.length + document.getElementById('message').value.length,
        messages = Math.ceil(chars / 160),
        remaining = messages * 160 - (chars % (messages * 160) || messages * 160);

    $remaining.text(remaining);
    //$remaining.text(remaining + ' characters remaining');
    //$messages.text(messages + ' message(s)');
});

});

I tested and it works. I also change the html a bit:

<p>
<span id="remaining">160</span> characters remaining
<!--<span id="messages">1 message(s)</span>-->
</p>

Answer 2

Firstly, character counting is very easy. You just need to use the length property on a string. To count the number of SMS messages needed, you'll need to divide by 160 and round up (because 161 characters requires 2 messages). Your code should probably look something like this:

HTML:

<textarea name="message" value="" id="message"></textarea>
<p>
    <span id="remaining">160 characters remaining</span>
    <span id="messages">1 message(s)</span>
</p>

jQuery:

$(document).ready(function(){
    var $remaining = $('#remaining'),
        $messages = $remaining.next();

    $('#message').keyup(function(){
        var chars = this.value.length,
            messages = Math.ceil(chars / 160),
            remaining = messages * 160 - (chars % (messages * 160) || messages * 160);

        $remaining.text(remaining + ' characters remaining');
        $messages.text(messages + ' message(s)');
    });
});

See jsFiddle example.

Answer 3

I think the following script can produce more accurate calculation of SMS parts:

//field: a text box that contains the SMS Text
//cntField: a text box that will contain the remaining count of characters for each part
//smsCntfield: a text box that will contain the count of parts
//lang: 0 for English, 2 for Arabic
//maxLimit: Maximum count of characters to limit the TextBox, (ex: for 5 SMS in Arabic 331, in English 762
function textCounter(field, cntfield, smsCntfield, lang, maxlimit) {

    part1Count = 0;
    part2Count = 0;
    part3Count = 0;
    part4Count = 0;
    part5Count = 0;
    if (lang == 2) {
        // Arabic
        part1Count = 70;
        part2Count = 63;
        part3Count = 66;
        part4Count = 66;
        part5Count = 66;
    } else if (lang == 0) {
        // English
        part1Count = 160;
        part2Count = 145;
        part3Count = 152;
        part4Count = 152;
        part5Count = 152;
    }

    smsCount = 0;
    smsCharCnt = 0;
    smsTotalCount = 0;

    if (field.value.length <= part1Count) {
        smsCount = 1;
        smsCharCnt = part1Count;
        smsTotalCount = part1Count;
    } else if (field.value.length <= (part1Count + part2Count)) { 
        smsCount = 2;
        smsCharCnt = part2Count;
        smsTotalCount = (part1Count+part2Count);
    } else if (field.value.length <= (part1Count+part2Count+part3Count)) {
        smsCount = 3;
        smsCharCnt = part3Count;
        smsTotalCount = (part1Count+part2Count+part3Count);
    } else if (field.value.length <= (part1Count+part2Count+part3Count+part4Count)) { 
        smsCount = 4;
        smsCharCnt = part4Count;
        smsTotalCount = (part1Count+part2Count+part3Count+part4Count);
    } else if (field.value.length <= (part1Count+part2Count+part3Count+part4Count+part5Count)) { 
        smsCount = 5;
        smsCharCnt = part5Count;
        smsTotalCount = (part1Count+part2Count+part3Count+part4Count+part5Count);
    }

    if (field.value.length > maxlimit) {
        // if too long...trim it!
        field.value = field.value.substring(0, maxlimit);
    } else {
        cntfield.value = smsTotalCount - field.value.length;
        smsCntfield.value = smsCount;
    }

}

example use:

<html:textarea cols="30" rows="5" property="textEn"
                                                    title="Text English"
                                                    onkeydown="textCounter(document.form.textEn,document.form.remLen2,document.form.smsCount2,0,762)"
                                                    onkeyup="textCounter(document.form.textEn,document.form.remLen2,document.form.smsCount2,0,762)" />
                                                                                                <br>
                                                <input type="text" readonly="readonly" name="remLen2"
                                                    size="3" maxlength="3" value="160"
                                                    title="Char Count">

                                                (
                                                <input type="text" readonly="readonly" name="smsCount2"
                                                    size="1" maxlength="1" value="1"
                                                    title="SMS Parts' />">
                                                )

Answer 4

This is late to the game, but here's what I'm currently putting together.

The character limit is set to 459 to allow for concatenated messages (as set by my service provider), with a text unit tot-up per 160 characters used. Bear in mind this aspect is incomplete as each unit after the initial one would comprise of less than the 160 character template due to message headers and whatnot. I just havent gotten the exact breakdown from the provider yet.

The crucial difference in this script is that the character count is sensitive to non-standard GSM characters, their ascii values specified in the included array. Where a non-standard character is typed, the count is 2, otherwise 1.

$('#sms-message').keyup(function(){
var     chars = $(this).val(),
        arr_chars = chars.split(''),
        remaining = $('#remaining'),
        messages = $('#messages'),
        count = 0;

    $.each(arr_chars, function(i, l){
        var     ascii = l.charCodeAt(0),
                ascii_val = parseInt(ascii),
                //array of special chars
                arr = [13, 47, 92, 123, 124, 125, 126, 128];

        if($.inArray(ascii_val, arr) !== -1) { count = count + 2; }
        else { count = count + 1; }
    });

            //inaccurate count, will have to be finetuned to provider specs
    var     units = Math.ceil(count / 160),
            remaining_chars = 459 - count;

        remaining.text(remaining_chars + ' characters remaining');
        messages.text(units + ' text unit(s)');

        if(remaining_chars < 0) {
            $(remaining).css('color', 'red');
        }
        else {
            $(remaining).css('color', 'black');
        }
});

Answer 5

Beware that SMS is more complicated than you seem to indicate.

Standard "160-character" SMS uses a strange 7-bit encoding that covers most ASCII, some European accents, misc symbols such as €, some capital Greek letters (the ones that don't look like Roman characters).

If your message uses other characters, it can instead be encoded as Unicode using UCS-2 (like UTF-16 but only BMP), for a limit of 70 characters. Actually, the specification says UCS-2, but emoji (non-BMP Unicode) can be sent in SMS so that implies UTF-16 is being used, in which case each emoji must "use up" 2 characters out of the 70 total.

But some languages can use "national language shift tables" which use an alternative 7-bit encoding. Most notably Turkish, but also Spanish, Portuguese, and ten Indian sub-continent languages. These are relatively new additions to the standard.

Even in the 7-bit encoding, a few characters are "escaped" which means they "use up" 2 characters. In the default 7-bit encoding, these are: {}[]\|^~€.

If your message goes beyond 160 characters, it can use "concatenated SMS", but then a small header is added to each message, meaning each segment only has room for something like 153 characters. There are two different versions of that header, of different sizes, thus it may not be 153 characters, but 152 (from memory). Similarly for Unicode concatenated SMS, the small header makes it 67 characters per segment.

Good luck with all that!