如何根据文本输入的值动态更改（或至少缩小）文本输入的宽度？

Question

如何根据输入值缩小（并尽可能拉伸）<input type="text" />？我的意思是，如何减少内在＆＃34;边际＆＃34;输入太短时输入元素的数量？

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

我的真实项目使用了datepicker，日期格式明显比输入短，这会导致布局问题。

JS-less解决方案将不胜感激，但如果使用JS（和jQuery）是不可能的。

Answer 1

使用onKeyPress事件来做到这一点，下面是一个例子：

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