I have a problem with a textarea similar to the tweet textarea of twitter. In my case, i need to limit the length of the textarea and show the length in a label.

For this porpuse i have the following textarea:

<textarea id="text_content" name="text_content" onkeyup="return limitCharacters(event,140);" onchange="updateCounter(this,140);"></textarea>

The limitCharacters function is this:

function limitCharacters(key_event, limit){
    var specialCharacters = [8,46]; //Delete and supr keycodes
    var unicode_value = String.fromCharCode(key_event.charCode)
    var textarea = document.getElementById("text_content");
    var textarea_currentlength = textarea.value.toString().length;
    for(i=0;i<specialCharacters.length;i++){
        if(specialCharacters[i] == key_event.keyCode){
            return true;
        }
    }
    if(textarea_currentlength <= limit-1){
        return true;
    }
    return false;
}

It allows to use supr and delete and limit the characters. In addition, i have a function which fires on the onchange event:

function updateCounter(textarea, limit){
    var textarea_currentlength = textarea.value.toString().length;
    var label_restantes = document.getElementById("remaining_chars");
    label_restantes.textContent = limit - textarea_currentlength;
}

I can't do both actions in the same function because the length when you press a key changes after finishing the onkeyup event. And i would get a wrong length.

The problem is the onchange event is not triggered until i touch with the mouse the UI or i change to another window or similar situations. Is it possible to fire the onchange automatically after the onkeyup changes the value?

I have a problem with a textarea similar to the tweet textarea of twitter. In my case, i need to limit the length of the textarea and show the length in a label.

For this porpuse i have the following textarea:

<textarea id="text_content" name="text_content" onkeyup="return limitCharacters(event,140);" onchange="updateCounter(this,140);"></textarea>

The limitCharacters function is this:

function limitCharacters(key_event, limit){
    var specialCharacters = [8,46]; //Delete and supr keycodes
    var unicode_value = String.fromCharCode(key_event.charCode)
    var textarea = document.getElementById("text_content");
    var textarea_currentlength = textarea.value.toString().length;
    for(i=0;i<specialCharacters.length;i++){
        if(specialCharacters[i] == key_event.keyCode){
            return true;
        }
    }
    if(textarea_currentlength <= limit-1){
        return true;
    }
    return false;
}

It allows to use supr and delete and limit the characters. In addition, i have a function which fires on the onchange event:

function updateCounter(textarea, limit){
    var textarea_currentlength = textarea.value.toString().length;
    var label_restantes = document.getElementById("remaining_chars");
    label_restantes.textContent = limit - textarea_currentlength;
}

I can't do both actions in the same function because the length when you press a key changes after finishing the onkeyup event. And i would get a wrong length.

The problem is the onchange event is not triggered until i touch with the mouse the UI or i change to another window or similar situations. Is it possible to fire the onchange automatically after the onkeyup changes the value?

• javascript
• html
• onchange

Share Improve this question Follow asked Jul 12, 2013 at 12:41 mannukmannuk 1,26955 gold badges2222 silver badges4343 bronze badges 4

• 2 change event works like this, however you can add keyup and keydown events to control the length of the text. – CME64 Commented Jul 12, 2013 at 12:43
• ok let me build a code for you then – CME64 Commented Jul 12, 2013 at 12:47
• i replaced the onkeyup by onkeydown and the onchange by onkeyup and works as expected. THANK YOU @CME64 – mannuk Commented Jul 12, 2013 at 12:49
• you're wele, glad I could help, I also posted an example in the answer. – CME64 Commented Jul 12, 2013 at 13:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

jsfiddle

javascript:

var elem = document.getElementById('dd');
var msg = document.getElementById('msg');
var len = 150;
function f(){
    var v = elem.value;
    if (v.length>len) elem.value = v.substring(0,len);
    else
        msg.innerHTML = v.length;
}

//elem.onchange = f;
elem.onkeyup = f;
elem.onkeydown = f;

html :

<textarea name="" id="dd" cols="30" rows="10"></textarea>
<p>message length :<span id="msg"></span></p>

that if you wanted a specific length of the text.

or you can control the size of the textarea to contain a rough number of characters using html attributes (rows and cols).

Why would you need to let the user use delete and backspace ? Those already work:

JavaScript

/* OnKeyUp event of the textarea*/
document.getElementById('myText').onkeyup = function() {

    /* We store the counter div element in a counter variable */
    var counter = document.getElementById('counter');

    /* If the content length of the textarea is greater than 75,
       delete the overflow. */
    if(this.value.length > 75)
        this.value = this.value.substring(0,75);

    /* Update the counter's value */
    counter.innerHTML = (75-this.value.length) + "/75";
};

Live Demo