目前，使用纯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';
"
/>
免责声明：显然，如果您正在实现许多此类输入，则编写一个通用函数来处理它们要好得多。此外，通过使用样式表避免内联样式始终更好。
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)
;
};
尺寸属性是迄今为止最明显的选择，虽然您可以直接使用scrollWidth设置宽度——如果您愿意的话。
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。但是，只有在浏览器解析了您的元素后才能找到它，因此您使用的脚本标签 - 用于运行以下代码的标签 - 要么放置在标记中的元素下面，即
<body> 的底部（更可取），要么等待窗口加载或DOM准备就绪后再使用。
autosize( document.getElementById('myinput'), 150 );
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)
;
};
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 />
javascript的情况下实现该效果。 - Joel Almeida