Tengo un campo de entrada que se reemplaza automáticamente con un área de texto y el mismo contenido según la cantidad de caracteres que el usuario haya ingresado:
<textarea v-if="myString.length > 20" v-model="myString"/> <input type="text" v-if="myString.length <= 20" v-model="myString"/>El problema que tengo es que el foco se pierde cuando un usuario ingresa el carácter 21. Y así, el usuario se irrita porque cuando escribe el carácter 22 no aparece en el área de texto (sin foco). Entonces, ¿cómo puedo establecer el foco en el área de texto recién renderizada? El problema aquí es que se renderiza automáticamente. De lo contrario, podría establecer una referencia en el área de texto y llamar a focus().
Otro problema es la eliminación del carácter 21 y el cambio del área de texto al elemento de entrada.
(copia de mi comentario porque esto podría ser útil)
Es probable que reemplazar un elemento de input por un textarea cree una experiencia de usuario horrible. ¿Por qué no usas textarea desde el principio? Si desea que el estilo cambie según la longitud de entrada, por ejemplo, aumente la altura si hay> 20 caracteres, entonces puede usar CSS para hacerlo.
<script setup> const props = defineProps({ modelValue: String, }) </script> <template> <textarea :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :rows="1" :style="modelValue.length > 20 ? { minHeight: '100px' } : { minHeight: '0px' }" /> </template> <AutoFocusedInput v-model="myString" />demostración (bifurcado de @ tony19)
Puede envolver el área de textarea / input en un componente y usar su gancho mounted para llamar a su focus() , como se ve en este componente:
<!-- AutoFocusedInput.vue --> <script setup> import { ref, onMounted, computed, nextTick } from 'vue' const input = ref() onMounted(async () => { await nextTick() input.value.focus() }) const props = defineProps({ modelValue: String, textarea: Boolean, }) const comp = computed(() => (props.textarea ? 'textarea' : 'input')) </script> <template> <component :is="comp" ref="input" v-bind="$attrs" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> <AutoFocusedInput textarea v-if="myString.length > 20" v-model="myString" /> <AutoFocusedInput v-else v-model="myString" />Si bien esto es técnicamente posible, esta experiencia de usuario probablemente no sea la ideal, y debería considerar otros diseños que no requieran una entrada de enfoque como esta (como lo indica @kien_coi_1997).