Specific textarea behaviour related to setTimeout

Question

what I am trying to do is give the user a textarea (with enabled input) and allow him to write up to 10 chars. Actually, the textarea should ALLOW more chars , not only 10, and the other chars would behave accordingly:

1º There is a setTimeout whenever the user is on the 11ºchar . So, I'm writing something there, I reach the char number 10º (the "maximum" allowed of text) and want that other char to be erased AFTER a given time.

somethinge = 10 chars.
anotherwor = 10 chars.

input: somethingeiefjaiehf
after 5 seconds:
input: somethinge

input: anotherwordtotestthisandseeifitworks
after 5 seconds:
input: anotherwor

2ºTo accomplish this I basically attached a clearTimeout to a global variable:

//Function "countChar(val)" is activated with the keydown event
    var timer_to_op = null;
    function countChar(val) {
            var len = val.value.length; //lenght of input in textarea
            clearTimeout(timer_to_op);
    //...
    //irrelevant code
    //...
                      }else if(len > 140){
                        $("#status_toOp_num").text(145-len);
                        timer_to_op = setTimeout(function(){
                            val.value = val.value.substring(0, 140);
                        },5000);

    }

Actually, for some reason, it won't work. If the user is typing AND he types another char within the 5 seconds then I want the timer to restart.

input: anotherwor  
input: anotherword (+d) timer = 1...2...3... 
input: anotherworde (+e) timer = 1...2...  
input: anotherwordef (+f) timer = 1...2...3...4...5!  
input: anotherwor     the user took more than 5 seconds so it erased the excedent.

Hope I got my point through. Any ideas on this one? Thank you very much! (I didn't put any html, it's only <textarea onclick="countChar(this)"> )

Answer 1

I didn't really try to understand what you are doing in your code, seems unnecessarily complicated.

Check this fiddle out. http://jsfiddle.net/Q2h5f/

HTML

<textarea id="limitText">0123456789</textarea>

Javascript

var tarea = document.getElementById("limitText");
tarea.onkeypress = checkInputText;
var timer = null;

function checkInputText(e) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(limitTextLength, 5000);
}

function limitTextLength() {
    var tareaVal = document.getElementById("limitText").value.toString();
    if (tareaVal.length > 10) {
        tarea.value = tareaVal.slice(0, 10);
    }
}

Should solve your issue.