打字时增加输入高度

Question

我有一个高度为 10px 和宽度为 100px 的输入元素。但如果用户输入的数据长度超过该宽度，则不会显示溢出。溢出时如何使输入元素的高度增加？这可以用css实现吗？如果没有，那么 Vanilla JS 将是首选。

HTML：

<input type="text" id="input">

CSS：

#input{
margin-left: 10px;
border-left: transparent;
border-right: transparent;
border-top: transparent;
border-bottom: 1px solid black;
width: 100px;
height: auto;
min-height: 10px;
}

Answer 1

这是可行的，但需要做很多工作。你会需要捕获每个按键输入，然后使用完全相同的字体和大小作为输入要素，创建页面某处的元素（或者说关闭的页面，所以没有人看到它）使用相同的内容，衡量其size 并将其与输入元素的大小进行比较，根据需要进行调整，然后再次处理其他元素。

就个人而言，我可能只会使用一个textarea元素。如果需要，它会有滚动条，您可以让用户根据需要调整其大小。