I'm looking for a solution to a problem, but I'm not able to find it. It could be in AngularJS or in Javascript (then I'll translate it in AngularJS). The problem is that I have to limit the rows of a simple textarea. The attribute 'rows=x' of HTML5 limit just the view. I have to limit the lines. The problem is that even if graphycally the lines go down, the ponents looks at it as a unique line. The user has to press ENTER to create a new line. But, I have to limit the lines. I did this directive:

angular.module('app').directive('maxlines', function (): any {
return function (scope: any, element: any, attrs: any) {
    element.bind("keydown keypress", function (event: any) {

        if (event.which === 13) {
            var text = element.val(),
                numberOfLines = (text.match(/\n/g) || []).length + 1,
                maxRows = parseInt(element.attr('rows'));

            if (event.which === 13 && numberOfLines === maxRows) {
                return false;
            }
        }
    });
};
});

It works if I press ENTER, but it doesnt work if I continue to write withouth press enter.

I'm looking for a solution to a problem, but I'm not able to find it. It could be in AngularJS or in Javascript (then I'll translate it in AngularJS). The problem is that I have to limit the rows of a simple textarea. The attribute 'rows=x' of HTML5 limit just the view. I have to limit the lines. The problem is that even if graphycally the lines go down, the ponents looks at it as a unique line. The user has to press ENTER to create a new line. But, I have to limit the lines. I did this directive:

angular.module('app').directive('maxlines', function (): any {
return function (scope: any, element: any, attrs: any) {
    element.bind("keydown keypress", function (event: any) {

        if (event.which === 13) {
            var text = element.val(),
                numberOfLines = (text.match(/\n/g) || []).length + 1,
                maxRows = parseInt(element.attr('rows'));

            if (event.which === 13 && numberOfLines === maxRows) {
                return false;
            }
        }
    });
};
});

It works if I press ENTER, but it doesnt work if I continue to write withouth press enter.

• javascript
• angularjs
• html
• angularjs-directive
• textarea

• Textarea can be resized and the line length will be different. I suggest you to block the resize of the textarea and to limit the number of character of it to have only on line. – Alexis Commented Jan 4, 2019 at 8:38
• I used css to block the size. Yeah I know I can limit character and this would be the best solution, but the break line (\n) is considered as 1 character, so if I set 800 characters, the user can press 799 times ENTER and then write a word in the last line – panagulis72 Commented Jan 4, 2019 at 8:41
• Then block the enter action – Alexis Commented Jan 4, 2019 at 8:43
• I have to let the user press enter to create a white space for a new paragraph :/ – panagulis72 Commented Jan 4, 2019 at 8:49
• Ok got it, then only authorize the enter if the last character is not a break line. – Alexis Commented Jan 4, 2019 at 9:00

4 Answers 4

I think you can do this with pure HTML.

<textarea cols="20" rows="5" wrap="hard" maxlength="100">

The wrap="hard" means that once the user has reached the end of the line - in this case, 20 characters - a newline will be inserted.

Once the user has reached 100 characters - the same as filling in 5 lines with 20 characters - no more input will be allowed.

Now, this doesn't stop someone from adding 10 lines with 10 characters - but does it get close to what you want to do?

This worked for me:

#your-textarea {
    max-height: 5rem;
    min-height: 2rem;
}

The user should be able to resize within that threshold.

I had a similiar issue and figured out that putting textarea in a parenting element with height set to fit-content and child-element to number of rows mutliplied by line-height, and checking if scrollheight exceeds the height of the parent fixes the issue. Saddly I dont use Angular so you'd have to translate. My code is:

      const maxHeight = parent.offsetHeight;
        child.addEventListener('input', () => {
            if(child.scrollHeight > maxHeight) {
                while(child.scrollHeight > maxHeight) {
                    child.value = child.value.slice(0, -1);
                }
            }
        });

Using max-height and max-width in CSS should lock it down to the dimensions you are looking for.

Other controls like max-rows or setting character limits will give you additional tools to put up guard rails for the user.