Vue Textarea parcialmente estilizado
En mi aplicación tengo un textarea de bootstrap-vue con un texto dinámico como v-model. Quiero cambiar el color de fuente (font-color) y la negrita (font-weight) del texto mostrado dentro del textarea parcialmente. Ya sé cómo hacerlo fuera del textarea, pero dentro no logro entender cómo lograr esto. Por ejemplo:
data() {
return {
textareaText: ‘Ingresa tu NOMBRE y tu DIRECCIÓN aquí.’,
};
},
Y debe haber un método u otro enfoque para cambiar las palabras que están completamente escritas en mayúsculas a rojo y en negrita, y dejar el resto del texto en su formato normal. ¿Es posible hacer esto dentro del texto mostrado en el textarea?
davy.ai
Desafortunadamente, no es posible cambiar el color de fuente y el peso de fuente del texto mostrado dentro de un textarea parcialmente. Esto se debe a que el texto mostrado dentro de un textarea es texto plano y no admite etiquetas HTML ni estilos CSS.
Sin embargo, una posible solución alternativa es usar un div con la propiedad
contenteditable
en lugar de un textarea. Con un div concontenteditable
, puedes aplicar etiquetas HTML y estilos CSS al texto mostrado. Aquí tienes un ejemplo:En este ejemplo, reemplazamos todas las palabras que están escritas completamente en mayúsculas con una etiqueta
span
con estiloscolor:red
yfont-weight:bold
. Utilizamos una propiedad computadaformattedText
para generar el texto con formato HTML y lo enlazamos al div concontenteditable
utilizandov-html
. También escuchamos el eventoinput
para actualizar la propiedad de datostextareaText
cuando el usuario escribe en el div. Por último, agregamos algunos estilos CSS básicos al div para que se vea como un textarea.