CODEWITHSUNDEEP
javascript
parthpar
parthpar

Reputation: 218

Character Limit In Text Area JavaScript - Special Case

I have a blocker in my way, where I have to limit the users to enter characters more than the limit in a custom text area tag. In our application, we are counting ENTER as 5 characters and any other SPECIAL CHARACTERS as 5 characters too. Once the limit is reached, we are suppose to block the user to type in any more characters without any alerts.

Here is what I have tried so far:

    function maxLengthVal(ele,length){
        var textSize = ele.value.length;

        if(textSize >= length){
            ele.value = ele.value.substring(0, length);
        }           
    }

This is the function what i am calling on onKeyup and Onkeydown. Right now it is only counting the characters, but does not consider ENTER or SPECIAL CHARACTERS as 5 characters.

I need a similar one, but with the 5 characters parsing in it. I am stuck on how to approach it. If someone can help that will be great.

Upvotes: 1

Views: 315

Answers (2)

Dominique Fortin
Dominique Fortin

Reputation: 2238

function maxLengthVal(ele,length) {
    var textSize = length_SPECIAL(value);

    if (textSize >= length) {
        ele.value = ele.value.substring(0, length);
    }           
}

Where length_SPECIAL is:

function length_SPECIAL(str) {
    function is_SPECIAL(charCode) {
        switch(charCode) {
            case 13: case 9: /* etc... */
                return true;
        }

         return false;
    }

    var cnt = 0;

    for (var i = str.length - 1; i >= 0; i -= 1) {
        cnt += (is_SPECIAL(str.charCodeAt(i)) ? 5 : 1);
    }

    return cnt;
}

Upvotes: 1

David Thomas
David Thomas

Reputation: 253328

Given the HTML:

<form action="#" method="post">
    <fieldset>
        <textarea id="demo"></textarea>
        <span class="count"></span>
    </fieldset>
</form>

I'd suggest:

function characterCount() {
    // caching the relevant element (passed in
    // automagically from addEventListener()):
    var self = this,
        // finding the element in which the count
        // should be displayed:
        output = self.parentNode.querySelector('.count'),
        // the value of the <textarea>:
        val = self.value,
        // a simple regular expression that matches all
        // non-word characters (equivalent to: [^A-Za-z0-9_],
        // so not A-z, a-z, 0-9 or underscore); this should
        // be replaced by whatever list of characters you
        // consider 'special':
        reg = /\W/g,
        // removing all the 'special' characters, by
        // replacing them with empty strings, and getting
        // the length of that non-special characters string:
        normalCount = val.replace(reg, '').length,

        // finding all the 'special' characters:
        specials = val.match(/\W/g),

        // if there were some 'special' characters found 
        // (String.match() returns null if there are no
        // matches found, or an array if matches are found)
        // we get the length of that array of matches, or
        // zero (to ensure a numerical value):
        specialCount = specials ? specials.length : 0;

    // setting the textContent to the result of normalCount
    // plus the number of 'special' characters multiplied
    // by 5:
    output.textContent = normalCount + (specialCount * 5);
}

// getting the textarea (via its id):
var textarea = document.querySelector('#demo');

// binding the characterCount function
// as the keyup event-handler:
textarea.addEventListener('keyup', characterCount);


function characterCount() {
  var self = this,
    output = self.parentNode.querySelector('.count'),
    val = self.value,
    reg = /\W/g,
    normalCount = val.replace(reg, '').length,
    specials = val.match(/\W/g),
    specialCount = specials ? specials.length : 0;

  output.textContent = normalCount + (specialCount * 5);
}

var textarea = document.querySelector('#demo');

textarea.addEventListener('keyup', characterCount);
<form action="#" method="post">
  <fieldset>
    <textarea id="demo"></textarea>
    <span class="count"></span>

  </fieldset>
</form>

JS Fiddle demo.

References:

Upvotes: 0

Related Questions