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 来做到这一点。