0

So I followed this example How to make input type text auto-expand also set specific width expand. and it works okay, but there are a few issues with it.

  1. If you're writing in capital letters then the input does not allocate enough space and it ends up hidden inside the input again
  2. In the early stages of the text input expanding, the text somewhat glitches a bit (shrinks left very momentarily before appearing back in the same place). Is it possible to remove this?
  3. If you're writing in all small caps, then there's too much left over space at the end

example: https://jsfiddle.net/daw3ah0L/

Both examples have the same number of 'letters'.

In the first input example, it does not fit the size.

In the second input example, there's a bit of left over space.

Lastly, what is size actually measured in? px, em?

Community
  • 1
  • 1
A. L
  • 11,695
  • 23
  • 85
  • 163
  • How about faking it using a span with `contenteditable="true"`? Look at the accepted answer on this question: https://stackoverflow.com/questions/7168727/make-html-text-input-field-grow-as-i-type – Cave Johnson Jan 10 '17 at 00:58
  • @KodosJohnson I prefer not since I have a function that grabs all inputs and uses that to then ajax data to a server. I'm also using spans for just information displays. – A. L Jan 10 '17 at 01:15

1 Answers1

3

Sounds like most of your problems are just due to fonts. Use a monospace font for the input.

PersonThing
  • 388
  • 2
  • 10
  • Use css to change the font-family to consolas or another monospaced font. – PersonThing Jan 10 '17 at 01:20
  • It helps a bit, but if the text gets a longer than my example (in all caps), it will still overflow – A. L Jan 10 '17 at 01:20
  • Would you know anything about that glitchy effect? – A. L Jan 10 '17 at 01:22
  • Yes - it's because you're only applying the new size in keyup. Do it in keydown instead. And add an extra 1 to size. Updated your fiddle. https://jsfiddle.net/daw3ah0L/2/ – PersonThing Jan 10 '17 at 01:22