
本文详解如何在 ios 设备(尤其是 iphone)上优雅支持多个邮箱地址输入——通过添加「逗号插入按钮」+ 修正事件绑定与语法错误,绕过系统键盘缺失逗号键的限制,确保 `type="email"` 输入框仍能合法接收以英文逗号分隔的多个邮箱。
在移动端 Web 表单中, 理论上支持多邮箱输入(以逗号分隔),但 iPhone 的原生邮箱键盘默认不提供英文逗号(,)按键,且空格、分号等字符无法被 type="email" 接受(会触发表单校验失败)。用户若强行输入空格或手动切换键盘,体验差且易出错。单纯依赖 multiple 属性并不能解决输入端的交互瓶颈。
✅ 正确实践:注入逗号按钮 + 健壮的 JavaScript 控制
最轻量、兼容性最佳的方案是:在输入框旁添加一个「插入逗号」按钮,点击后自动在输入框末尾追加 ", "(含空格便于后续输入),并保持焦点,提升操作连贯性。
以下是修复后的完整代码片段(已整合进你的 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(需置于











