如何在SendGrid中创建无需JavaScript的复制按钮？

给你几个能在SendGrid里实现类似复制功能的办法，都不用依赖JS：

• 借助邮件客户端的mailto链接
  构造一个mailto:链接，把要复制的文本塞进邮件主题或正文里，用户点击后会打开默认邮件客户端，文本会自动填充进去，用户直接选中复制就行。示例代码：

  <a href="mailto:?subject=要复制的目标文本&body=要复制的目标文本" style="padding:8px 16px; background:#007cba; color:#fff; text-decoration:none; border-radius:4px;">复制文本</a>
  

  优点是全客户端兼容，缺点是需要用户手动选中文本复制，但胜在简单可靠。

• 预格式化文本+引导手动复制
  把要复制的内容放进<pre>标签里，让格式更规整，旁边加个按钮样式的提示，告诉用户选中后按Ctrl/Cmd+C复制。示例代码：

  <div style="display:flex; align-items:center; gap:10px;">
    <pre style="padding:8px; border:1px solid #eee; border-radius:4px; background:#f9f9f9;">这里是要复制的文本内容</pre>
    <span style="padding:8px 16px; background:#007cba; color:#fff; border-radius:4px; cursor:pointer;">选中后按Ctrl+C复制</span>
  </div>
  

  这个方案最直接，虽然需要用户手动操作，但体验也不差，完全符合SendGrid的限制。

• 用contenteditable让内容一键全选
  把文本放在contenteditable="true"的容器里，用户双击就能全选内容，之后直接复制就行。示例代码：

  <div style="display:flex; align-items:center; gap:10px;">
    <div contenteditable="true" style="padding:8px; border:1px solid #eee; border-radius:4px; background:#f9f9f9; min-width:220px;">需要复制的文本</div>
    <span style="color:#666;">双击全选后复制</span>
  </div>
  

  操作步骤少一点，用户双击就能选中全部内容，复制起来更方便。

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