为什么Bootstrap模态框中textarea标签有内容却显示为空？

核心原因及对应解决办法 #

• DOM未完全加载就初始化模态框
  如果你的JS初始化代码放在DOM元素之前执行，此时<textarea>标签还没被浏览器解析，Bootstrap模态框初始化时读取不到标签内的初始内容，渲染时就会显示为空。
  解决办法：将初始化代码放在<body>标签末尾，或者包裹在DOM加载完成的监听事件中：

document.addEventListener('DOMContentLoaded', function() {
  let captionModal = new bootstrap.Modal(document.querySelector('#photo-caption-modal')); 
  captionModal.show(); 
})

• 隐式逻辑覆盖了textarea默认值
  即使你没有编写主动修改textarea内容的代码，也可能存在两种隐式清空逻辑：
  1. 全局表单重置规则监听了模态框的show.bs.modal事件，触发时自动清空了模态框内所有表单控件的值
  2. 浏览器自动填充策略异常，对未设置autocomplete属性的表单控件默认清空初始值，可给textarea添加autocomplete="off"属性测试：

  <textarea class='form-control' id='photo-caption' rows='3' placeholder="Write a caption" autocomplete="off"> HELLO WORLD </textarea>
  

• 页面存在重复ID
  如果页面内存在多个id="photo-caption-modal"的元素，JS选择器会默认匹配第一个匹配到的元素，如果对应元素内的textarea没有写默认值，就会显示为空。请确保页面内所有ID属性唯一。

其他排查方向 #

• 检查CSS规则，有没有给textarea设置color: transparent、font-size: 0、伪类content: ""这类导致内容不可见的样式
• 确认textarea使用的是完整闭合结构<textarea>内容</textarea>，不要写成自闭合标签<textarea />
• 如果你使用了Vue、React等前端框架，表单控件的默认值需要用框架指定的语法绑定（如Vue的v-model、React的defaultValue），直接写在标签中间的内容会被框架忽略

内容的提问来源于stack exchange，提问作者limestreetlab