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
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>