How to calculate max-height with using max-length property in Textarea

Question

in the above example,input has max character length so user can not able to write anymore. So I have to don't allow resizing beyond 200 characters since that is max for this field. So i think need to calculate max-height property.

Pass maxLength property is 200 , line-height is 18px. Is there any way to calculate max height with these values ?

i found an example here but it doesn't work for me.

TL:DR; Nope... The needed size of the textarea will depend on a number of factors such as the font being used, the size of the font. What about new lines add a few and you'll need more height. It would also depend upon the mix of characters used e.g. capital x's `X` and m' `M` take up much more space than periods '.' and i's `i` (assuming a variable width font) — phuzi, Dec 30 '20 at 15:50
@phuzi what is the best way for my scenario ? how can achieve that i want ? — enessahin, Dec 30 '20 at 15:55
I'd take a look at [contenteditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-contenteditable) and [Making content editable](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content) on MDN. Style it like a textarea and you have a dynamically sized textarea — phuzi, Dec 30 '20 at 15:59

score 0 · Answer 1 · answered Dec 30 '20 at 16:04

You should probably think about contenteditable. Add a few event listeners and you've got a dyanmically sized text area.

contenteditable on MDN
Making content editable also on MDN

To do what you want has too many variables to be done "properly" and the needed size of the textarea will depend on a number of factors such as the font being used, the size of the font.

Of course the content itself would also affect the required size, add a few new lines and you'll need even more height.

The mix of characters would also affect the needed size i.e. capital x's X and m's M take up much more space than periods '.' . and i's i (assuming a variable width font.)

.editable {
  border: 1px solid black;
  min-height: 1em;
}

<div contenteditable="true" class="editable">
  This text can be edited by the user.
</div>

in my example there is need to be resize icon and user should be able to resize texarea until maxlength filled. Contenteditable good solution to make dynamic size but i think this not solve my problem — enessahin, Dec 30 '20 at 16:22

How to calculate max-height with using max-length property in Textarea

1 Answers1