disable textarea by height not characters

Question

So many times we want to limit how much a user can write, but here I have a special sized box that it has to fit in, so I want to disable adding more characters if it would surpass a specific height. here is what I did:

var over;
$('textarea').keypress(function(e){
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    var t = $(this).val();
    jQuery('<div/>', {
        style: "visibility:hidden",
        text: t,
        id: "test"
    }).appendTo('body');
    var h = $('#test').height();
    if(h >= 100){
        over = true;
    }
    else{
        over = false;
    }
    if(over){
        //code goes here
    }
    $('#test').remove();
});

I got the limiting code (what goes where I have the "code goes here" comment) from here and it ALMOST works.

There is only one problem:

if somebody copies and pastes, it can place multiple characters and therefore still go over the limit.

How can I fix this issue?

jsfiddle

Answer 1

Another somewhat hacky solution could be to check scroll on key up. If scroll exists, delete the last character while scroll exists:

function restrictScroll(e){
    if(e.target.clientHeight<e.target.scrollHeight){
        while(e.target.clientHeight<e.target.scrollHeight){
            e.target.value = e.target.value.substring(0, e.target.value.length-1);
        }
    }
};
document.getElementById("textareaid").addEventListener('keyup', restrictScroll);

This would work as you type and if you paste blocks of text. Large text blocks may take a little longer to loop through though. In which case you may want to split on "\n" and remove lines first, then characters.

jsfiddle

Answer 2

If you want your function to fire whenever the text in your field changes, you can bind it to the input and propertychange events, as per this answer:

• https://stackoverflow.com/a/5494697/20578

Like this:

$('#descrip').on('input propertychange', function(e){

This will make sure your code fires when e.g. the user pastes in content using the mouse.

As for stopping them from entering content that would go over the limit, I think you have to keep track of what content they've entered yourself, and then revert their last edit if it infringed your criteria.

Note that e.g. Twitter doesn't stop the user from entering more characters if they've gone over the limit - they just tell the user they're over the limit, and tell them when they're back under. That might be the most usable design.