How to make a input field expand vertically and not horizontally when you type?

Question

The problem

I made an input. Now when I type, the input will adjust it's size so it fits the amount of text inside it. Now the problem is that I tried to look for some answers on the internet, but all of then expand horizontally, but I want it that when it reaches a certain point, then it will expand vertically instead of horizontally. I also DO NOT want to make a span or div with contenteditable. How can I do this?

Some code

<html>
  <body>
    <input>
  </body>
</html>

Um yes, but the goal is to make it an input tag, and not anything else. — Drake Krewson, Jun 13 '21 at 15:59
ok I will try to hook it up using a textarea tag. If that doesn't work I will notify you. — Drake Krewson, Jun 13 '21 at 16:02

score 2 · Answer 1 · answered Jun 13 '21 at 16:01

2

Inputs are only for single line inputs. It's not even possible to add new lines in an input.

What you're looking for is a textarea that fits the height of the content. This is possible with JavaScript:

document.querySelector('textarea').addEventListener("input", function(){
  this.style.height = '0px';
  this.style.height = this.scrollHeight + 'px';
})

<textarea></textarea>

answered Jun 13 '21 at 16:01

Spectric

30,714
6
20
43

um I don't want it to be expandable. – Drake Krewson Jun 13 '21 at 16:03
@Drake *"I want it that when it reaches a certain point, then it will expand vertically"* – Spectric Jun 13 '21 at 16:05
1

I think @DrakeKrewson means that he doesn't want the user to resize it – MK. Jun 13 '21 at 16:09
Adding `textarea { resize: vertical; }` or `textarea { resize: none; }` in CSS should fix it – MK. Jun 13 '21 at 16:10
ok I got it. I will try. – Drake Krewson Jun 13 '21 at 17:00
um that made the css go haywire. didn't work – Drake Krewson Jun 13 '21 at 17:13
@DrakeKrewson could you provide your full HTML and CSS? – Spectric Jun 13 '21 at 17:27
um where? My html is huge so I can't post it here. – Drake Krewson Jun 13 '21 at 17:32

How to make a input field expand vertically and not horizontally when you type?

The problem

Some code

1 Answers1