Textarea charCount - Preventing user paste

Question

The code below is working fine except that if I paste a string with more than 10 characters in it, it should only paste in the first 10 characters. Currently it does not do this, how do I prevent more than 10 characters being pasted?

http://jsfiddle.net/qfzkw/2/

Answer 1

As stated, <textarea maxlength="10"> will work for a small amount of cases - but not all.

It is hard to determine how to prevent the user (in firefox for example) from entering the text area, selecting the browser menu Edit and then clicking on Paste. I am really at a loss for how to prevent that. You can check the keydown event to prevent ctrl + v. You can disable the context menu to disallow the right clicking of the text area (although a malicious user can edit the front end javascript and then re-enable this feature).

In short, there is no universal way to prevent user paste in a proper fashion.

However, you could hack a solution (always my favorite when it seems there is no way to continue on something you really want). This approach I am about to suggest is dependent on how many timers you have running. If you have multiple timers for animation, google suggests you try to fold them all into one timing unit which the others derive from. If this is the case, please refactor your timers.

Implement a global timer. Implement a function which runs ever 25ms based on that timer. Cache the contents of the textarea. See if those contents have changed.

textarea

<textarea id="maintextarea"></textarea>

script

/*init*/
var globalTimer = new Date();
var cachedText = document.getElementById("maintextarea").value;
var iterationCount = 0;

function cacheText() {
    cachedText = document.getElementById("maintextarea").value;
}

function upDateTimer() {
    globalTimer = new Date();
    var timerTimeout = setTimeout('upDateTimer()', 5);
    timeBasedOperations();
}
upDateTimer();

function timeBasedOperations() {
    iterationCount++;//this will allow timing to occur
    //TODO: Add in other timers calls based on global timer
    if (iterationCount % 5) {//every fifth iteration (hence 25ms)
        checkTextArea();
    }
}

function checkTextArea() {
    var currentText = document.getElementById("maintextarea").value;
    var textArea = document.getElementById("maintextarea");
    if (currentText.length > cachedText.length) {
        //TODO: Add additional logic for catching a paste or text change
        textArea.value = currentText.substr(0, 10);
    }
    cacheText();
}

I think although this implements a timer, this is a very practical solution. It also happens to work (tested).

:)

Answer 2

simply use <textarea maxlength="10"></textarea>​

No javascript needed for this. It automatically takes care of copy paste also.

Here is the updated jsFiddle.

Answer 3

You can't peek into the clipboard buffer from browsers, so your only option is to limit it to 10 chars like you currently do. Use the maxlength="10" attribute instead of the javascript character counting thing you got going on.

<textarea maxlength="10"></textarea>​