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

【问题标题】：Why is Textarea empty despite there is content between <textarea></textarea>尽管 <textarea></textarea> 之间有内容，为什么 Textarea 为空
【发布时间】：2021-12-25 00:15:28
【问题描述】：

我在 Bootstrap 模式中包含了一个 Textarea，例如 Before<textarea>Foo</textarea>After，但它始终只显示 Before [empty textarea] After。我不知道为什么会这样。我没有 JS 对那个 textarea 做任何事情，所以 <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();

我只是希望在 textarea 中的 Before 和 After 之间看到 hello world，但它是空的。 “hello world”不会改变任何东西。

下面是我看到的截图

【问题讨论】：

标签： javascript html forms twitter-bootstrap bootstrap-modal

【解决方案1】：

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

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

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

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

&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"&gt;

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

【讨论】：

感谢您分享您的时间。确实，我意识到确实有一条 JS 行将 textarea 设置为 ""
很高兴你找到了罪魁祸首！快乐的编码，伙计！