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

user_16003345 0
Viewed 1295

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>

css html javascript
1 Answers

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>

user_142512210
Related