我如何将焦点设置在新（自动）渲染的 dom 元素上？

Question

我有一个输入字段，根据用户输入的字符数，该输入字段会自动替换为文本区域和相同的内容：

<textarea v-if="myString.length > 20" v-model="myString"/>
<input type="text" v-if="myString.length <= 20" v-model="myString"/>

我遇到的问题是，当用户输入第 21 个字符时焦点会丢失。因此，用户会感到恼火，因为当他键入第 22 个字符时，该字符没有出现在文本区域中（没有焦点）。 我怎样才能将焦点设置在新渲染的文本区域上？这里的问题是它会自动渲染。否则我可以在文本区域上设置一个引用并调用 focus()。

另一个问题是删除第 21 个字符以及从文本区域切换回输入元素。

Answer 1

（复制我的评论，因为这可能会有所帮助）

用 textarea 替换 input 元素可能会产生糟糕的用户体验。为什么不从一开始就使用 textarea 呢？如果您希望样式根据输入长度而改变，例如如果超过 20 个字符，则增加高度，那么您可以使用 CSS 来做到这一点。

sssccc

演示（分叉来自@tony19）

Answer 2

您可以将 textarea/input 包装在组件中，并使用其 mounted 挂钩来调用其 focus()，如以下组件所示：

sssccc

演示

虽然这在技术上是可行的，但这种用户体验可能并不理想，您应该考虑其他不需要像这样集中输入的设计（如 @kien_coi_1997 所示）。