0

I have an input: <input type="text">. But if I type something longer than the length, it scrolls left. Obviously, I expected this, but I'm stuck trying to prevent that. I tried:

input {
    width: auto;
}

but that doesn't work. Does anyone know how to fix this?

  • 1
    So, you want the input to expand as the user types? – Rojo Mar 23 '21 at 18:28
  • @Rojo Yes, pretty much. –  Mar 23 '21 at 18:29
  • I think that would be a bit disturbing as a client. Why not use `textarea` and just let line breaks be created? – Rojo Mar 23 '21 at 18:30
  • @Rojo That wouldn't work, because the input is supposed to update a `

    ` tag when you click enter. It gets replaced with the input, so if there were line breaks and then there aren't anymore it would look strange.

     –  Mar 23 '21 at 18:33

1 Answers1

1

Instead of using an input, you can use span:

<span role="textbox" contenteditable>Type here!</span>
Rojo
  • 2,749
  • 1
  • 13
  • 34
  • Would `.select()` work on it? When I tried it it gave me an error. –  Mar 23 '21 at 18:41
  • @illogicalapple `.select()` is specfically for `input` elements – Rojo Mar 23 '21 at 18:42
  • Is there another way to do that then? –  Mar 23 '21 at 18:44
  • 1
    [This CSS-tricks](https://css-tricks.com/auto-growing-inputs-textareas/) blog has a working example. Note that it uses SCSS. There is a JS solution before it, but it seems a bit buggy. – Rojo Mar 23 '21 at 18:49
  • I looked for a while, and apparently [this](https://stackoverflow.com/a/987376/15434173) works. Thanks for the help! –  Mar 23 '21 at 19:07