html – 自动制作(和封闭)与内容一样宽

概述如果我有 <div><input></input></div> 如何使输入和包含div的宽度自动与当前显示的文本值一样宽.特别是,当用户编辑输入时,我希望盒子增长和缩小. 我能做的是纯CSS吗？我是否必须倾听事件并更新样式？怎么样？ (注意：在这种情况下,字体是单倍间距的,所以可能使它更容易,尽管我对一般解决方案感兴趣). 您可以添加一个输入事件侦听器,它将在值更改时运行. 在该监听器中,更新输入 如果我有

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

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

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

解决方法 您可以添加一个输入事件侦听器,它将在值更改时运行.

在该监听器中,更新输入size attribute.

如果字体是等宽字体,它应该按照需要工作.

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

input { Font-family: monospace; }

<input size="1" />

总结

以上是内存溢出为你收集整理的html – 自动制作(和封闭)与内容一样宽全部内容，希望文章能够帮你解决html – 自动制作(和封闭)与内容一样宽所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。