目前没有办法用纯CSS来实现，也许曾经calc和attr可以组合使用，但目前还不行。所以我们不得不回退到 JavaScript。
没有任何真正的理由为此使用 jQuery。您可以争辩说您的“关注点应该分开”，即代码应该与标记分开，但使用addEventListener 很容易做到这一点。但是，如果我正在处理一小段 JavaScript，它往往会更快——在实现、页面渲染方面，甚至对于那些试图追踪导致输入行为异常的人来说——使用内联事件侦听器。
<input type="text"
style="min-width: 150px;"
onkeyup="this.size = Math.max(this.value.length, 1)"
/>
或：
<input type="text"
style="width: 150px;"
onkeyup="
this.style.width = '1px';
this.style.width = (
this.scrollWidth > 140
? this.scrollWidth + 10
: 150
)+'px';
"
/>
免责声明：显然，如果您要实现其中的许多输入，最好编写一个通用函数来处理它们。另外，使用样式表避免内联样式总是要好得多。
/**
* Directly setting the size attribute, with minWidth
*/
function autosize(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
var v = Math.max(t.value.length, 1);
t.setAttribute
? t.setAttribute('size', v)
: (t['size'] = v)
;
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
size 属性是迄今为止最明显的选择，尽管您可以直接设置宽度（如果您愿意的话）使用scrollWidth。
/**
* Directly setting width, with minWidth
*/
function autosize(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
t.style.width = '1px';
t.style.width = t.scrollWidth + 'px';
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
您可以通过将目标元素作为第一个参数传入来触发这些函数中的任何一个。有很多方法可以找到你的元素，最简单和最通用的是getElementById。尽管只有在浏览器解析过元素时才能找到元素，但您使用的脚本标签（用于运行以下代码）要么必须放在标记中的元素下方，即 @ 的底部987654330@（首选），或者在等待窗口加载或 DOM 就绪之后。
autosize( document.getElementById('myinput'), 150 );
/**
* Directly setting width, with minWidth
*/
function autosize1(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
t.style.width = '1px';
t.style.width = t.scrollWidth + 'px';
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
/**
* Directly setting the size attribute, with minWidth
*/
function autosize2(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
var v = Math.max(t.value.length, 1);
t.setAttribute
? t.setAttribute('size', v)
: (t['size'] = v)
;
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
autosize1( document.getElementById('a'), 150 );
autosize2( document.getElementById('b'), 150 );
<p>Each input is using a different implementation:</p>
<input type="text"
style="min-width: 150px;"
onkeyup="this.size = Math.max(this.value.length, 1)"
/><br />
<input type="text"
style="width: 150px;"
onkeyup="
this.style.width = '1px';
this.style.width = (
this.scrollWidth > 140
? this.scrollWidth + 10
: 150
)+'px';
"
/><br />
<input type="text" id="a" /><br />
<input type="text" id="b" /><br />