css - 设置输入宽度以适合文本大小

Question

我有并输入了图标，看起来像这样:

<div class="input-with-icon">
  <input type="text" value="abcdefeghijklmnopqrtvuvwxyz" class="form-control">
  <span class="icon icon-calendar"></span>
</div>

live demo

是否可以调整 CSS，使输入始终适合文本宽度？例如它会随着我的输入而拉伸(stretch)。

目前，.input-with-icon 具有固定宽度，但如果我将其设置为自动，输入将不会拉伸(stretch)。

Answer 1

<input id="txt" type="text" value="Hello World!" />
input {
min-width:50px!important;
max-width:99.99%!important;
transition: width 0.25s;
text-align:center;
}
function resizable (el, factor) {
var int = Number(factor) || 7.7;
function resize() {el.style.width = ((el.value.length+1) * int) + 'px'}
var e = 'keyup,keypress,focus,blur,change'.split(',');
for (var i in e) el.addEventListener(e[i],resize,false);
resize();
}
resizable(document.getElementById('txt'),7);