为什么“ width：-moz-fit-content”在输入[type = text]上不起作用？

Question

我试图根据其内容使输入元素可自动增长。我知道可以通过一些js代码来完成。但是我只想通过CSS实现它。

虽然-moz-fit-content完美适用于DIV元素，但不适用于INPUT。所以我想知道为什么会这样。

.input {
    width: -moz-fit-content;
    border: 1px solid red;
    padding: 10px;
}

<input type="text" value="4 000" class="input" />

<div class="input" contenteditable="true">4 000</div>

Answer 1

尝试使用此代码：

<input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" value="4 000" class="input" />