自动将<input />（并包含<div>）与内容一样宽

Question

如果我有

<div><input></input></div>

如何使input和包含div的宽度自动与当前显示的文本值一样宽。特别是，当用户编辑输入时，我希望盒子增长和缩小。

我可以使用纯CSS吗？我是否必须倾听事件并更新样式？怎么样？ （注意：在这种情况下，字体是单倍间距的，所以可能会更容易，尽管我对一般解决方案感兴趣）。

Answer 1

可以帮助您的纯CSS解决方案：

您可以使用input伪造span，然后将其contenteditable="true"广为支持，请参阅here

＆＃13;

＆＃13;

span {
  border: 1px solid black;
  display: inline-block;
  white-space: nowrap;
  font-family: monospace
}

＆＃13;

<span contenteditable="true">&nbsp;</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以添加input事件侦听器，只要值发生更改，它就会运行。

在该听众中，更新input＆＃39; size attribute。

如果字体是等宽字体，它应该可以正常工作。

＆＃13;

＆＃13;

document.querySelector('input').addEventListener('input', function() {
  this.size = this.value.length || 1;
});

＆＃13;

input { font-family: monospace; }

＆＃13;

<input size="1" />

＆＃13;

＆＃13;

＆＃13;