When my textarea is filled with content I don't want it to accept anymore content that exceeds its rows and cols.
Illustration:
Textarea default(part 1):

Textarea Full(part 2):

Textarea exceeds height(part 3):

I don't want part 3 to happen, it keeps the height but the content moves when a newline is entered. I have tried the answer from Limit number of lines in textarea and Display line count using jQuery but it only stop my inputs when I press Enter, but it keep accepting inputs when enter a long word: 
Example: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
I tried another way by using AutoGrow textarea Plugin because it gets the Line and Characters per Line, so when the text line is equal to the row of the textarea it will increase its rows. It was the closest solution that I can think of but it failed too.