尽管 <textarea></textarea> 之间有内容，为什么 Textarea 是空的

Question

我在像 Before<textarea>Foo</textarea>After 这样的 Bootstrap 模式中包含了一个 Textarea，但它总是只显示 Before [empty textarea] After。我不知道为什么会这样。我没有 JS 对那个文本区域做任何事情，所以 <textarea></textarea> 之间的内容应该会显示出来吧？

我有下面的 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>

我展示的

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

我只是希望在文本区域的 Before 和 After 之间看到 hello world，但它是空的。 “你好世界”没有改变任何东西。

下面是我看到的截图

Answer 1

它在代码编辑器中对我来说工作正常，所以肯定有一些流氓习惯 CSS 或 javascript 隐藏了。检查 chrome 中的元素时，转到样式选项卡和计算选项卡并查找可能隐藏它的任何自定义 css。

如果您放入的 innerHTML 中的默认文本不可见，最好知道您是否可以在用户输入值时看到该文本。

由于您粘贴的代码运行良好...您至少知道哪些内容没有损坏。您在其他地方有一些自定义 css 或 js 隐藏了该值，因此请继续挖掘。

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>

尽管 <textarea></textarea> 之间有内容，为什么 Textarea 是空的

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

html

javascript

forms

twitter-bootstrap

bootstrap-modal