Wie setze ich den Fokus auf ein neu (automatisch) gerendertes Dom-Element?

Question

Ich habe ein Eingabefeld, das automatisch durch einen Textbereich und denselben Inhalt ersetzt wird, basierend auf der Anzahl der vom Benutzer eingegebenen Zeichen:

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

Das Problem, das ich habe, ist, dass der Fokus verloren geht, wenn der Benutzer das 21. Zeichen eingibt. Daher ist der Benutzer verärgert, weil bei der Eingabe des 22. Zeichens das Zeichen nicht im Textbereich erscheint (keinen Fokus hat). Wie kann ich den Fokus auf den neu gerenderten Textbereich setzen? Das Problem hierbei ist, dass es automatisch gerendert wird. Ansonsten kann ich eine Referenz auf den Textbereich setzen und focus() aufrufen.

Ein weiteres Problem besteht darin, das 21. Zeichen zu entfernen und vom Textbereich zurück zum Eingabeelement zu wechseln.

Answer 1

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

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

演示（分叉来自@tony19）

Answer 2

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

演示

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