• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

317
Vistas
¿Por qué Textarea está vacía a pesar de que hay contenido entre <textarea></textarea>?

Incluí un Textarea en un modal Bootstrap como Before<textarea>Foo</textarea>After pero siempre muestra solo Before [empty textarea] After . No tengo idea de por qué ese es el caso. No tengo JS haciendo nada en esa área de texto, por lo que el contenido entre <textarea></textarea> debería aparecer, ¿verdad?

Tengo el siguiente código para el modal Bootstrap

 <section class='modal fade' id='photo-caption-modal'> <div class='modal-dialog modal-dialog-centered'> <div class='modal-content w-75 mx-auto'> <div class='modal-header'> <h6 class='modal-title'>Modify the photo caption</h6> <button type='button' class='btn-close' data-bs-dismiss='modal'></button> </div> <div class='modal-body'> Before<textarea class='form-control' id='photo-caption' rows='3' placeholder="Write a caption"> HELLO WORLD </textarea>After </div> </div> </div> </section>

que muestro por

 let captionModal = new bootstrap.Modal(document.querySelector('#photo-caption-modal')); captionModal.show();

Simplemente esperaba ver hola mundo entre el Antes y el Después en el área de texto, pero está vacío. "hola mundo" no cambia nada.

A continuación se muestra una captura de pantalla de lo que veo

  • Captura de pantalla del navegador
  • Detalle de elemento de inspección de cromo
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Funciona bien para mí en el editor de código, por lo que debe haber algún CSS personalizado o javascript oculto. Al inspeccionar el elemento en Chrome, vaya a la pestaña de estilos y la pestaña calculada y busque cualquier css personalizado que pueda estar ocultándolo.

Si el texto predeterminado que coloca en el código HTML interno no está visible, sería bueno saber si puede ver el texto cuando el usuario ingresa un valor.

Dado que su código, tal como se pegó, funciona bien ... al menos sabe lo que no está roto. Tienes algunos css o js personalizados en otro lugar que ocultan ese valor, así que sigue investigando.

 let captionModal = new bootstrap.Modal(document.querySelector('#photo-caption-modal')); captionModal.show();
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <section class='modal fade' id='photo-caption-modal'> <div class='modal-dialog modal-dialog-centered'> <div class='modal-content w-75 mx-auto'> <div class='modal-header'> <h6 class='modal-title'>Modify the photo caption</h6> <button type='button' class='btn-close' data-bs-dismiss='modal'></button> </div> <div class='modal-body'> Before<textarea class='form-control' id='photo-caption' rows='3' placeholder="Write a caption"> HELLO WORLD </textarea>After </div> </div> </div> </section>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda