1

I am using a textarea to emulate a piece of 9.5x11 Letter sized US paper.

I have a textarea that is appropriately scaled to the 9.5x11 size; however, I want to prevent users from being able to add more text that would overflow the textarea.

The goal is to limit the user to the boundaries of the textarea, and thus preserve the ability to scale the content to Letter sized paper.

I've tried using resize:none, and each option for overflow, but these mainly seem to deal with the pixel size of the textarea, and not the content inside it. How can I use Javascript, CSS, or HTML to keep the user within the boundaries of the textarea?

David Allen
  • 59
  • 5
  • 1
    You might find this interesting - http://stackoverflow.com/questions/6042115/javascript-detect-textarea-to-be-full - not sure if this is a duplicate of your question as you are asking about fixing boundaries. – Robin Mackenzie Dec 10 '16 at 05:19
  • If you know the character count perhaps this post will help you: http://stackoverflow.com/questions/10414420/how-to-prevent-user-to-enter-text-in-textarea-after-reaching-max-character-limit – Ben Hare Dec 10 '16 at 05:24
  • @RobinMackenzie I think that the concept is interesting, and if other solutions don't come up I will look into trying to use this method. I was looking for a method that would provide more of a "hard block" effect that prevented the user from typing the characters over the limit, I dislike the effect of using javascript to delete the users' words in front of them. – David Allen Dec 10 '16 at 05:26
  • I suppose **maxlength** will do – Jad Dec 10 '16 at 05:27
  • @BenHare The interesting thing about this project is that I'm working with a customized WYSIWYG editor, so the textarea will contain images and large text, I am looking to create hard boundaries around the text area in order to account for the possible irregularities. A character limit would apply differently in each case and allow users who use large text to overflow beyond the 9.5x11 limits. – David Allen Dec 10 '16 at 05:28
  • How, exactly, are you making the size of the box 9.5x11? THAT is what I'm wondering about. – junkfoodjunkie Dec 10 '16 at 05:42
  • @junkfoodjunkie The textarea just needs to maintain the 9.5x11 ratio, the text size is variable. So it's done with simple max-height and max-width variables that follow the ratio. – David Allen Dec 10 '16 at 05:46
  • Normally I would say something as simple as `` where the styling prevents the resize, the wrap attribute prevents text from overflowing on the side and the maxlength attribute sets the maximum amount of characters a user can type. But since this is a WYSIWYG editor, the max amount of characters that fit the available space varies. – icecub Dec 10 '16 at 05:49
  • 1
    My best solution so far would be to create a custom javascript event that fires on the textarea overflow event and blocks any further additions to the area. Just have to think about how to code it. – icecub Dec 10 '16 at 05:52
  • Can you include `html`, `css` at Question? – guest271314 Dec 10 '16 at 05:57
  • I didn't want to turn this into an answer just yet as it still has a few drawbacks to it, but it should get you pretty close: https://jsfiddle.net/2dmp57tp/ – icecub Dec 10 '16 at 06:44
  • 1
    Fixed one of the problems to improve it a bit: https://jsfiddle.net/2dmp57tp/2/ – icecub Dec 10 '16 at 07:00

0 Answers0