• 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

316
Vistas
Why is Textarea empty despite there is content between <textarea></textarea>

I have included a Textarea in a Bootstrap modal like Before<textarea>Foo</textarea>After but it always shows only Before [empty textarea] After. I have no idea why that is the case. I have no JS doing anything to that textarea, so the content between <textarea></textarea> should just show up right?

I have the below code for the Bootstrap modal

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

Which I show by

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

I was simply expecting to see hello world between that Before and After in the textarea, but it is empty. "hello world" doesn't change anything.

Below is a screenshot of what I see

  • Browser Screenshot
  • Chrome Inspect Element closeup
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

It works fine for me in the code editor, so there must be some rogue custom CSS or javascript hiding. When inspecting the element in chrome, go to the styles tab & computed tab and look for any custom css that might be hiding it.

If the default text that you put in the innerHTML of isn't visible, it'd be good to know whether you can see the text when the user inputs a value.

Since your code, as pasted, works fine... you know what isn't broken at least. You've got some custom css or js somewhere else that is hiding that value, so keep digging.

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