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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
(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.Démo (fork de @tony19)
Vous pouvez utiliser
textarea/input包装在组件中，并使用其mounted挂钩来调用其focus()comme indiqué dans les composants suivants :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).