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

Question

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

我有下面的引导模式代码

 <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(); 

我只是希望在文本区域的前后看到hello world，但它是空的。“你好世界”不会改变任何事情。

下面是我看到的截图

• 浏览器屏幕快照
• 铬检查元件特写

Answer 1

在代码编辑器中，它对我很好，所以必须有一些流氓自定义CSS或javascript隐藏。当检查chrome中的元素时，转到styles选项卡& computed选项卡，并查找任何可能隐藏它的自定义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>

​