本文详解如何在 ios 设备（尤其是 iphone）上优雅支持多个邮箱地址输入——通过添加「逗号插入按钮」+ 修正事件绑定与语法错误，绕过系统键盘缺失逗号键的限制，确保 `type="email"` 输入框仍能合法接收以英文逗号分隔的多个邮箱。

在移动端 Web 表单中， 理论上支持多邮箱输入（以逗号分隔），但 iPhone 的原生邮箱键盘默认不提供英文逗号（,）按键，且空格、分号等字符无法被 type="email" 接受（会触发表单校验失败）。用户若强行输入空格或手动切换键盘，体验差且易出错。单纯依赖 multiple 属性并不能解决输入端的交互瓶颈。

✅ 正确实践：注入逗号按钮 + 健壮的 JavaScript 控制

最轻量、兼容性最佳的方案是：在输入框旁添加一个「插入逗号」按钮，点击后自动在输入框末尾追加 ", "（含空格便于后续输入），并保持焦点，提升操作连贯性。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

以下是修复后的完整代码片段（已整合进你的 HTML 结构）：

<div class="form-group mb-3 mt-3 ms-1 me-1">
  <label for="email" class="control-label">To:</label>
  <input 
    type="email" 
    multiple 
    class="form-control" 
    id="to" 
    placeholder="Enter 1 or more email addresses, separated by commas ','" 
    name="email" 
    required />
  <!-- ✅ 修正：移除无效 onclick，使用标准事件监听 -->
  <button type="button" id="addComma" class="btn btn-sm btn-outline-secondary ms-2">Add comma</button>
</div>

对应 JavaScript（需置于