默认输入框尺寸

Question

如果没有内联定义或者为其添加CSS样式规则，input元素默认的大小为"20"。

那么如何将默认值设置为实际值呢？对于其他元素：

<div style="display: inline; width: auto;">
    The box will only fit the width of it's content
</div>

只需使用width: auto即可。我无法设置定义的宽度，因为值可能会更长。例如：

<input id="short" type="text" value="1000" />
<input id="long" type="text" value=" Areally long name is in this input field." />

我想让 #short 的大小为 1000（实际上是 size="4" 加上 padding），但 #long 的长度应为所需长度。这些输入是以编程方式传入的，因此我不能简单地在想要缩短的输入上放置 short 类，并在想要长的输入上放置 long 类。我真的只想这样做：

input { width: auto; }

有没有办法做到这一点？

- o_O

---

可能是<input>字段使用width:auto的重复问题。 - j08691

我看到了一些相关的内容，但它们都试图让一个输入填充父级容器。我想要多个输入根据内容自适应大小。 - o_O

但它是https://dev59.com/8msz5IYBdhLWcg3wHUS0的完全副本。 - o_O

Answer 1

输入框默认的大小是"20"

"默认大小"取决于浏览器、版本和操作系统。无法通过内联样式来更改。

最佳解决方案是设置宽度和填充，使它们加起来等于100%。

input {
  width: 98%;
  padding: 1%;
}

然后将其设置为绝对的左侧和右侧0

<fieldset>
    <input type="text" />
</fieldset>

最后加入这个CSS

<style type="text/css">
    fieldset {
      position: relative;
    }

    input {
        position: absolute;
        left: 0;
        right: 0;
    }
</style>

- Sato

---

你说输入框的大小取决于浏览器和操作系统，有没有链接或表格显示不同版本浏览器和操作系统下输入框的大小呢？这将非常有用。 - Fab

你有什么建议吗？ - Fab

目前，在标准文档中[https://html.spec.whatwg.org/multipage/input.html#the-size-attribute]，`size`属性的默认值为20。我无法确认在回答撰写时是否是这种情况。 - Vince

Answer 2

在 HTML 的输入元素中，宽度受到其 size 属性的控制。以下是我使用的一种快速方式来模拟 { width: auto; }，这样做不会依赖于浏览器：

Angular：

<input type="text" [size]="element.value.length + 1" #element>

纯原生JavaScript：

<input type="text" oninput="this.size = this.value.length + 1">

- Fabricio

---

这是什么语法？Angular？ - dovid

是的。我刚刚编辑了一下，澄清了一下，并添加了纯JS语法。 - Fabricio

Answer 3

假设表单中每个输入都在自己的行中，您可以将size属性设置为所需大小，但还要添加以下CSS：

。

input[type="text"] {
  max-width: 100%;
}

这可以确保字段不会溢出表单。这种方法为短字段提供了预期数据量的视觉提示（因为它们将是正确的大小），同时对长字段进行了限制。

- mefopolis

Answer 4

    <form>
      <input id="input-1" type="text" style="padding: 5px 5px 5px 5px;" size=1
onInput$={() => { (document.getElementById('input-1')! as HTMLInputElement).setAttribute('size', `${(document.getElementById('input-1')! as HTMLInputElement).value.length}`) }}
 value="100yrs" />
    </form>

这对我在一个 .tsx 快速模板中起作用了

- noiissyboy