CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Neo
Neo

Reputation: 407

Is there a way to detect when an overflow-y:auto has been triggered, and create a popup as a result?

I have a website that allows a user to keep adding text to a box. I want them to be able to keep adding text to it until it gets to the point where it would create a scrollbar. Instead of creating a scrollbar, I want the website to basically stop them from adding anymore text to it, with a popup that essentially says "In order to add more text, you need to be a member."

Is this possible? Does anyone have tips on how to best do this?

For now, I just have a simple textarea, aka:

<textarea rows="4" cols="50" style="overflow-y:auto;">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

Upvotes: 3

Views: 185

Answers (1)

Liftoff
Liftoff

Reputation: 25372

Try something along these lines:

$(function(){

    $("textarea").keypress(function(e){
    
        if(this.scrollHeight > $(this).outerHeight())
        {
            alert("You must be a member");
            e.preventDefault();
        }
    });

});

JSFiddle

3 things to note.

  1. When the scrollbar appears, the operating width of the textbox decreases. This will push text down to the next line, when originally it didn't.

  2. Anyone could just change the width/height of your textbox and make them bigger than you originally intended to allow more space to write stuff.

  3. Anyone can just disable JavaScript and put more than you limit the box to.

Upvotes: 3

Related Questions