Comment puis-je définir le focus sur un élément dom nouvellement (auto) rendu ?

Question

J'ai un champ de saisie qui se remplace automatiquement par une zone de texte et le même contenu en fonction du nombre de caractères saisis par l'utilisateur :

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

Le problème que j'ai est que le focus est perdu lorsque l'utilisateur saisit le 21ème caractère. Par conséquent, l'utilisateur est ennuyé car lorsqu'il tape le 22ème caractère, le caractère n'apparaît pas dans la zone de texte (n'a pas de focus). Comment puis-je définir le focus sur la zone de texte nouvellement rendue ? Le problème ici est qu'il s'affiche automatiquement. Sinon, je peux définir une référence sur la zone de texte et appeler focus().

Un autre problème consiste à supprimer le 21ème caractère et à revenir de la zone de texte à l'élément d'entrée.

Answer 1

(Copier mon commentaire car cela pourrait être utile)

Et textarea 替换 input 元素可能会产生糟糕的用户体验。为什么不从一开始就使用 textarea ? Si vous souhaitez que le style change en fonction de la longueur d'entrée, par exemple en augmentant la hauteur si elle contient plus de 20 caractères, vous pouvez le faire en utilisant CSS.

sssccc

Démo (fork de @tony19)

Answer 2

Vous pouvez utiliser textarea/input 包装在组件中，并使用其 mounted 挂钩来调用其 focus() comme indiqué dans les composants suivants :

sssccc

Démo

Bien que cela soit techniquement possible, cette expérience utilisateur n'est peut-être pas idéale et vous devriez envisager d'autres conceptions qui ne nécessitent pas de saisie centralisée comme celle-ci (comme le suggère @kien_coi_1997).