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.

Answer 3

You may try this:

$('#descrip').bind('paste',function(e) { 
    var el = $(this);
    setTimeout(function() {
        //Get text after pasting
        var text = $(el).val();
        //wath yu want to do
    }, 100);
};

Jsfiddle

The solution is taken from here and here. It works by binding to the paste event. Since paste event is fired before the text is pasted, you need to use a setTimeout to catch the text after pasting. There is still some rough edges (i.e. if you select text and press backspace, it does not update).

Still, Spudley comment has some valid points, that you may want to consider.

Edit:

Note on the jsfiddle: It allow you to go over the limit when pasting, but once over the limits, you cannot paste (or type) more text until you go under the limit again.

Must be taken into account that, since you are limiting the text length by the size it ocuppies after rendering (wich have it own issues as pointed by Spudley), and not a defined lenth, you can know if a text fits or not, but not know how much of the text is inside the limits, and how much is out of them.

You may consider reseting textbox value to its previous value if pasted text makes imput go over the limit, like in this one.

However, for cutting down the text after pasting so as non-fitting text is left out, but the rest of the pasted text is allowed, you need an entirely different approach. You may try iterating over the text until you find how much of the new text is enough.

By the way, line feeds and seems to cause your original script to behave weirdly.

Answer 4

I've been able to get the program working:

var over = false;
var num = 0;
var valid_entry = "";
$('#descrip').keyup(function(e){
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    var t = $(this).val();
    getMaxRow(t,key,this);
});

function getMaxRow(t,key,obj) {
    jQuery('<div/>', {
            "class": "hide",
            text: t,
            id: "test"
        }).appendTo('body');
        var h = $('#test').height();
        $('#test').remove();
        if(h >= 100){
            num += 1;
            if(num == 1){
                var div = '<div id="message">You have run out of room</div>'
                $('body').append(div);
            }
            over = true;
        }
        else{
            over = false;
            valid_entry = t;
            if(num >= 1){
                $('#message').remove();
                num = 0;
            }
        }

        if( over ) {
            //Do this for copy and paste event:
            while ( over ) {
                 //Try using a substring here
                 t = t.substr(0,(t.length-1));
                 over = getMaxRow(t,key,obj);
            }
        }

        $(obj).val(valid_entry);

        return over;
}