Why is Textarea empty despite there is content between <textarea></textarea>-CodePudding

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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>