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

Question

我有输入图标，看起来像这样：

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

live demo

是否可以调整CSS以使输入始终符合文本宽度？例如它会在我打字的时候伸展。

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

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);

Answer 2

你有很多选择。 第一个选项是将您的<input type="text">更改为<textarea class="form-control"></textarea>。 <textarea>可以处理比<input type="text">更好的字符 第二选项使用this example。此示例来自this link中的@megakorre。如果得到答案，别忘了投票或检查。这都是老兄！快乐的编码！ ：）

Answer 3

<div class="input-with-icon">
<input type="text" value="tes" class="form-control">
</div>
input[type="data-autosize-input"] {
 width: 90px;
min-width: 90px;
 max-width: 300px;
 transition: width 0.25s;    
 }