如何基于Bootstrap 5实现带预填充内容的可复制文本域？

直接用Bootstrap的form-control类修饰原生textarea就能解决你的问题——Bootstrap的textarea组件本质就是加了样式类的原生textarea，完全支持预填充内容和JS获取值，不需要依赖placeholder。

核心实现步骤 #

1. 搭建Bootstrap表单结构：给原生textarea添加form-control类，预填充内容直接写在textarea标签内部（用Jinja变量渲染），搭配Bootstrap按钮组件做复制触发。
2. 实现复制逻辑：用现代Clipboard API完成复制，同时保留旧浏览器的降级方案，可选搭配Bootstrap的Toast组件做成功提示。

完整代码示例（Jinja模板） #

<!-- 确保项目已加载Bootstrap样式和JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="container mt-4">
  <div class="mb-3">
    <label for="prefilledTextarea" class="form-label">预填充内容</label>
    <!-- 直接在textarea标签内渲染Jinja变量，自动应用Bootstrap样式 -->
    <textarea class="form-control" id="prefilledTextarea" rows="5">{{ prefilled_content }}</textarea>
  </div>
  <button class="btn btn-primary" id="copyBtn">一键复制</button>
  
  <!-- Bootstrap Toast 复制成功提示 -->
  <div class="toast mt-2" role="alert" aria-live="assertive" aria-atomic="true" id="copyToast">
    <div class="toast-body">
      内容已复制到剪贴板
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const textarea = document.getElementById('prefilledTextarea');
    const copyBtn = document.getElementById('copyBtn');
    const copyToast = new bootstrap.Toast(document.getElementById('copyToast'));

    copyBtn.addEventListener('click', async () => {
      try {
        // 优先使用现代Clipboard API
        await navigator.clipboard.writeText(textarea.value);
        copyToast.show();
      } catch (err) {
        // 降级到传统方法，兼容旧浏览器
        textarea.select();
        textarea.setSelectionRange(0, 99999); // 适配移动端
        document.execCommand('copy');
        copyToast.show();
      }
    });
  });
</script>

关键说明 #

• 预填充内容的正确方式：不要用placeholder（仅作提示，无法通过JS获取），直接把Jinja变量放在textarea标签内部，这样内容既会显示在文本域中，也能通过textarea.value获取到。
• Bootstrap样式复用：只要给textarea添加form-control类，就能自动获得Bootstrap的样式、自适应宽度、响应式特性，和原生textarea的功能完全兼容。
• 复制功能兼容性：结合两种复制方案，覆盖现代和旧版浏览器，确保功能稳定。

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