html - 如何调整宽度<input>自动使用CSS中包含标签的长度（大小）？

问题描述

我有一个 CSS 问题。我有一个输入，点击上传按钮后，它可以自动填充 pdf 文档的名称。问题可能是在某些情况下，这个 pdf 的名称可能会很长。所以我的目标是找到一个关于如何<input>使用包含标签自动调整长度的 css 技巧。

代码示例：

<input id="name" style="    margin-left: 83px;"
            placeholder="#{label['lbl.common.fileName']}"
            value="#{modelController.document.nameDoc}" />

请这个屏幕截图可以解释更多的问题。

大小问题

任何想法表示赞赏。

标签： htmlcss

您基本上需要一个动态输入字段，其中宽度会因输入的内容（上传的 PDF）而改变大小。你需要一些 JS 才能运行它。像这样：

 <input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

html - 如何调整宽度自动使用CSS中包含标签的长度（大小）？

问题描述

解决方案

推荐阅读