Maison > Questions et réponses > le corps du texte
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.
P粉4594409912024-03-31 20:04:17
(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)
P粉3331862852024-03-31 17:38:22
Vous pouvez utiliser textarea
/input
包装在组件中,并使用其 mounted
挂钩来调用其 focus()
comme indiqué dans les composants suivants :
sssccc
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).