HTML Submit按钮在Android端失效，PC端正常的问题排查与解决

问题根源分析 #

你遇到的问题核心是mailto协议与POST方法的兼容性差异，以及旧版Android Chrome的表单处理限制：

• mailto本质是唤起本地邮件客户端的协议，标准设计中它更适配GET方法，POST并非所有浏览器/邮件客户端都支持。Android 6.0对应的Chrome版本通常在v50-v60区间，这个版本对mailto的POST处理存在兼容性缺陷，无法正确解析表单数据并唤起邮件客户端。
• iPhone Safari对mailto的非标准用法（比如POST）做了额外兼容，所以能正常提交，这就是跨设备差异的原因。

解决办法 #

这里有几个递进的修复方案，你可以根据需求选择：

1. 直接将表单method改为GET（最简单有效）

这是最直接的修复，GET方法是mailto协议的标准用法，所有主流浏览器（包括旧版Chrome）都支持。修改后的表单代码：

<form id="contact_form" action="mailto:example@somewhere.com" method="get" enctype="text/plain">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Your name.."><br>
  <label for="email">Email</label>
  <input type="text" id="email" name="email" placeholder="Your email.."><br>
  <label for="phone">Phone</label>
  <input type="text" id="phone" name="phone" placeholder="Your phone number.."><br>
  <label for="subject">Subject</label>
  <input type="text" id="subject" name="subject" placeholder="The subject of the message.."><br>
  <label for="question">Question</label>
  <textarea id="question" name="question" placeholder="Write your question here.."></textarea><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

• 新增的enctype="text/plain"属性可以让表单数据以整洁的纯文本格式传递，避免乱码或格式混乱。
• 修改后，表单数据会以查询参数的形式附加到mailto链接后，邮件客户端能正确解析并填充到邮件主题和正文中。

2. 用JavaScript手动构建mailto链接（自定义性更强）

如果需要保留自定义校验逻辑（比如你之前的prompt验证），可以完全绕开表单的method限制，手动拼接mailto链接：

function checkAndSubmit(formID) {
  const form = document.getElementById(formID);
  // 获取并校验表单数据（这里可以添加你的自定义校验逻辑）
  const name = form.name.value.trim();
  const email = form.email.value.trim();
  const phone = form.phone.value.trim();
  const subject = form.subject.value.trim();
  const question = form.question.value.trim();

  if (!name || !email || !question) {
    alert("请填写必填字段！");
    return;
  }

  // 构建清晰的邮件内容格式
  const body = `Name: ${name}\nEmail: ${email}\nPhone: ${phone}\n\nQuestion:\n${question}`;
  // 编码特殊字符，避免链接解析错误
  const encodedSubject = encodeURIComponent(subject);
  const encodedBody = encodeURIComponent(body);

  // 构建完整的mailto链接并唤起邮件客户端
  window.location.href = `mailto:example@somewhere.com?subject=${encodedSubject}&body=${encodedBody}`;
}

然后将表单的提交按钮改为调用这个函数：

<input type="button" value="Submit" onclick="checkAndSubmit('contact_form')">

这种方式兼容性拉满，完全不受浏览器对表单method的限制影响。

额外说明 #

为什么iPhone Safari可以正常工作？因为Safari团队对mailto的非标准用法做了兼容处理，即使使用POST方法也能解析表单数据，但Chrome的旧版本没有这个兼容逻辑，所以出现了跨设备的差异。

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