我有一个输入字段，根据用户输入的字符数，该输入字段会自动替换为文本区域和相同的内容：
<textarea v-if="myString.length > 20" v-model="myString"/> <input type="text" v-if="myString.length <= 20" v-model="myString"/>
我遇到的问题是，当用户输入第 21 个字符时焦点会丢失。因此，用户会感到恼火，因为当他键入第 22 个字符时，该字符没有出现在文本区域中（没有焦点）。 我怎样才能将焦点设置在新渲染的文本区域上？这里的问题是它会自动渲染。否则我可以在文本区域上设置一个引用并调用 focus()。
另一个问题是删除第 21 个字符以及从文本区域切换回输入元素。
P粉4594409912024-03-31 20:04:17
（复制我的评论，因为这可能会有所帮助）
用 textarea 替换 input 元素可能会产生糟糕的用户体验。为什么不从一开始就使用 textarea 呢？如果您希望样式根据输入长度而改变，例如如果超过 20 个字符，则增加高度，那么您可以使用 CSS 来做到这一点。
sssccc
演示（分叉来自@tony19）
P粉3331862852024-03-31 17:38:22
您可以将 textarea/input 包装在组件中，并使用其 mounted 挂钩来调用其 focus()，如以下组件所示：
sssccc
虽然这在技术上是可行的，但这种用户体验可能并不理想，您应该考虑其他不需要像这样集中输入的设计（如 @kien_coi_1997 所示）。