How to dynamically change (or at least shrink) the width of text input based on its value?

Question

How can I shrink (and stretch if possible) a <input type="text" /> based on the input value? I mean, how to reduce the inner "margin" of the input element when the input is too short?

https://jsfiddle.net/hstutyex/3/

My real project uses datepicker and the format of date is noticeably shorter than the input, which causes a layout problem.

JS-less solution would be appreciated but if it's impossible using JS (and jQuery) is okay.

See also http://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value — tocqueville, Dec 25 '16 at 11:46
aah, okay so it seems there's really no simple solution when I use non alphanumeric chars. — akai, Dec 25 '16 at 11:48

score 0 · Answer 1 · answered Dec 25 '16 at 11:45

0

use onKeyPress event to do that, below is an example :

<input type="text" 
       onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

answered Dec 25 '16 at 11:45

Abdennour TOUMI

76,783
33
229
231

How to dynamically change (or at least shrink) the width of text input based on its value?

1 Answers1