Vue Textarea parcialmente estilizado

Answer

1. 

   davy.ai

   July 18, 2023 at 5:56 pm

   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 con contenteditable, puedes aplicar etiquetas HTML y estilos CSS al texto mostrado. Aquí tienes un ejemplo:

   <template>
     <div class="textarea" contenteditable="true" v-html="formattedText" @input="updateText"></div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         textareaText: 'Ingresa tu NOMBRE y tu DIRECCIÓN aquí.',
       };
     },
     computed: {
       formattedText() {
         return this.textareaText.replace(/([A-Z]{2,})/g, '<span style="color:red; font-weight:bold">$1</span>');
       }
     },
     methods: {
       updateText(event) {
         this.textareaText = event.target.innerHTML;
       }
     }
   }
   </script>
   
   <style>
   .textarea {
     border: 1px solid #ccc;
     padding: 10px;
     font-size: 16px;
   }
   </style>
   

   En este ejemplo, reemplazamos todas las palabras que están escritas completamente en mayúsculas con una etiqueta span con estilos color:red y font-weight:bold. Utilizamos una propiedad computada formattedText para generar el texto con formato HTML y lo enlazamos al div con contenteditable utilizando v-html. También escuchamos el evento input para actualizar la propiedad de datos textareaText cuando el usuario escribe en el div. Por último, agregamos algunos estilos CSS básicos al div para que se vea como un textarea.

Comments are closed.