html/javascript-当空间用完时将输入文本转换为文本区域

所以我有一个文本输入

<input type="text" id="myText" style="width: 400px; height: 20px;">

当没有足够的空间输入内容时，我想把它变成一个文本区

文本输入空间用完后，我想将其更改为以下内容：

<textarea id="myText" style="width: 400px; height: 40px; resize: none;"></textarea>

当文本区域中的空间用完时，其高度将再次更改：

<textarea id="myText" style="width: 400px; height: 60px; resize: none;"></textarea>

我面临的主要问题是将原始输入文本转换为文本区域。除了反复试验之外，还有没有一种简单的方法可以真正检测空间是否用完了？空间用完后，如何将文本输入更改为文本区域

---

谢谢。

我认为有两个不同的元素会使事情复杂化，请看一下只有一个textarea元素，然后根据需要扩展它。如果您对jQuery的使用还满意的话，您可能需要研究一个jQuery插件：

@PatrickEvans其实不是。一旦空间用完，我想将文本输入转换为textarea。不自动扩展文本区域。我已经知道如何自动展开它。在textchange事件检查长度和增加特定长度时，将其转换为textarea。在减少长度时，使用一个扩展的文本区域似乎更容易，而不是尝试在两者之间切换，但还好。如果他们最终删除了一定数量的内容，您是否希望它切换回文本框？