1

What I have:

I have a textarea with a dynamic width and height. I'm using p5.dom.js to create DOM elements with width and height according to the windows width and height.

What I want:

I want to restrict the characters in the textarea so it can't be bigger than the size of the textarea. When the character get to this point, the user shouldn't be able to insert more characters.

Problems:

textarea {
  resize: none;
  overflow: hidden;
}

Even when I remove the resize and the scroll bar, it doesn't stop it from going down. When the user types one more letter this happens.

I know that I can use maxlength or rows and cols, but because the textarea have a dynamic width and height, I'm trying to find a solution where you don't use this attributes.

Solutions:

  1. The only solution the I thought of this making a event to check when the scroll bar goes down and remove 1 character until the scroll bar goes back to the top. How to check that?
  2. Removing the ability of the scroll and not just hiding the scroll bar. I look in a lot of places but i could only find questions that hide the scroll bar.

If there's no way to do that in CSS, jQuery would be a good way.

Edit 1:

It's ok if some users have lower character limit than others

Vencovsky
  • 28,550
  • 17
  • 109
  • 176
  • I am not sure if there's a way to do it even in JavaScript. The maximum you could restrict the user is to use the right number of characters. – Praveen Kumar Purushothaman Oct 08 '18 at 13:11
  • For accessibility reasons users may have increased the default font size. This might mean some users will have a lower limit than others. – apokryfos Oct 08 '18 at 13:14
  • @PraveenKumarPurushothaman and do you know a way to decrese the font so when the scroll goes down, you cant still see all the text in the textarea ? – Vencovsky Oct 08 '18 at 13:16
  • @Vencovsky That might be possible. But how do you gauge the user's font size? Some people might have bigger fonts, a different OS, where the fonts appear in a different size. So it's kinda tricky to understand how HTML renders in those cases. I have come across a lot of issues like this, but haven't found a solution yet. – Praveen Kumar Purushothaman Oct 08 '18 at 13:18
  • @Vencovsky In simple sense, you won't be able to detect the scroll bar coming and going out of textarea - or wait, guess that's possible. – Praveen Kumar Purushothaman Oct 08 '18 at 13:18
  • 1
    as @PraveenKumarPurushothaman touched on, looking for when the scrollbar is added into the textbox, and then construct some logic around that would probably be a way of doing it. https://stackoverflow.com/questions/3238515/javascript-detect-scrollbar-in-textarea – Martin Oct 08 '18 at 13:22
  • Thanks @Martin and that's a perfect dupe. – Praveen Kumar Purushothaman Oct 08 '18 at 13:23
  • Simply removing one character from the end is not really the proper solution - I might have added more than one character at a time, for example via copy&paste. Ok, you could keep removing characters from the end, until it fits again - but what if I moved my text cursor? I have typed a wonderful, prosaic text that the great writers of history would envy me for, then I go back to the beginning of the text, copy&paste something into there - and you start cutting off my wonderful work at the end? Oh man, am I going to be pissed at the !%&$ that treats my creative input that way :-) – misorude Oct 08 '18 at 13:26
  • it might be wrong, but I will try to share my idea: basically you could calculate the "maximum" amount of character into a determined height: eg. 200px - 300 character, 250px - 350 character and so on, then create an if else function according width that. (it might not be the best way though) – Matt Oct 08 '18 at 13:27

0 Answers0