How to disable manual resize of a <textarea> element, but still allow for automatic resizing f-CodePudding

I'm sure there's an answer to this question somewhere on SO, but after some time of looking, I was unable to find one.

What I'm trying to do is create a <textarea> element that the user CANNOT manually resize (there won't be a dragable resize item in the bottom-right corner for the user to resize with), but still the <textarea> element will automatically resize when the text flows to a new line.

What I've tried is using resize: none, and while that eliminates manual resizing, it also removes automatic resizing when the content of the textarea goes too far within the space provided.

To be clear, I do not want there to be a scroll bar when the text overflows the size of the <textarea>. I would like for the element to get larger to accommodate the additional text.

Here's an example of what I've tried:

textarea {
  resize: none;
}

<textarea></textarea>

As you can see, it removes manual resizing, but also removes automatic resizing.

CodePudding user response：

you can use contenteditable="true", it can auto resize when typing but can't be resized manually

<span contenteditable="true">tester</span>

CodePudding user response：

There is an alternate of textarea using contentEditable property in HTML. You can use "DIV" instead of "Textarea" along with "contentEditable" property and your textarea is ready. We can not resize it but it will resize according to the lenght of content

Please check the below code snippet:

.alternate-texarea{width:300px; min-height:40px; border:1px solid #000; border-radius:6px;padding:5px;}

<strong id="alternate-textarea-label">Edit Me</strong>
<div contentEditable aria-labelledby="alternate-textarea-label" role="textbox" aria-multiline="true" aria-placeholder="Street, City, Postal Code" >
  Edit the text
</div>