mailto功能失效与邮件正文样式问题：需将textbox内容作为邮件正文

问题拆解 #

你现在碰到两个核心问题：

• mailto功能异常，且邮件正文的样式没法正常生效
• 需要实现点击按钮时，把文本框里的内容直接作为邮件正文打开邮件客户端

针对性解决方案 #

1. 动态实现文本框内容作为邮件正文

静态的mailto链接没法实时获取文本框内容，得用JavaScript动态拼接链接才行：

• 给按钮绑定点击事件，触发时读取文本框的值
• 对内容里的特殊字符（比如换行、&、空格）做转义处理，避免链接失效

2. 修复邮件正文样式失效问题

绝大多数邮件客户端（比如Outlook、Gmail）对外部<style>标签的支持极差，必须用内联样式，而且推荐用table布局保证兼容性，别依赖外部样式表。

完整可运行示例代码 #

<!DOCTYPE html>
<html>
<head>
    <title>邮件发送工具</title>
    <!-- 页面自身的样式可以保留，但邮件正文样式要内联 -->
    <style>
        .wrapper { text-align: center; margin-top: 30px; }
        .button { 
            background-color: #4CAF50; 
            border: none; 
            color: white; 
            padding: 15px 32px; 
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px 0;
            cursor: pointer;
            border-radius: 4px;
        }
        #emailContent {
            width: 80%;
            height: 180px;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h3>输入邮件内容</h3>
        <textarea id="emailContent" placeholder="在这里输入邮件正文..."></textarea>
        <button class="button" onclick="openEmailClient()">发送邮件</button>
    </div>

    <script>
        function openEmailClient() {
            // 获取文本框内容
            const rawContent = document.getElementById('emailContent').value;
            // 转义特殊字符，确保mailto链接正常解析
            const encodedContent = encodeURIComponent(rawContent);
            // 构造mailto链接，可自定义收件人、主题
            const mailtoUrl = `mailto:your-recipient@example.com?subject=自定义邮件主题&body=${encodedContent}`;
            // 打开系统默认邮件客户端
            window.location.href = mailtoUrl;
        }
    </script>
</body>
</html>

额外注意事项 #

如果你的邮件正文需要带HTML格式，记得把所有样式都内联到元素上，比如：

<!-- 带样式的邮件正文示例（必须内联样式） -->
<table style="border-spacing: 0; width: 100%; padding: 5px;">
    <tr>
        <th style="border-top: 1px solid #ddd; padding: 8px;">序号</th>
        <th style="border-top: 1px solid #ddd; padding: 8px;">内容</th>
    </tr>
    <tr>
        <td style="border-top: 1px solid #ddd; padding: 8px;">1</td>
        <td style="border-top: 1px solid #ddd; padding: 8px;">测试内容</td>
    </tr>
    <tr>
        <td style="border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 8px;">2</td>
        <td style="border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 8px;">底部内容</td>
    </tr>
</table>

把这段HTML转义后放到body参数里即可，但要注意部分客户端对复杂HTML支持有限，尽量保持结构简洁。

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