一个 Safari 邮箱输入中文的异常 Bug

公司项目的登录弹窗有一个邮箱输入框在 Safari 浏览器下，切换成中文输入法输入，会出现重复输入前面字符的 Bug（比如输入 woshi，会变成 woswoshwoshi），这个问题在 Chrome 浏览器上偶现，Safari 上是必现，尤其是手机和 iPad 上，非常影响用户体验。

此前从来没遇到过类似的现象，之前一直没想到是哪里的问题，这次我把目光放在了一个 onChange 参数上，发现其他同事加了一个过滤无效字符的逻辑，怀疑这里有问题。

<Input
  type="email"
  value={email}
  onChange={(ev) => {
    // 只允许英文字母、数字和邮箱中的特殊字符
    const filteredValue = ev.target.value.replace(
      /[^a-zA-Z0-9@._+%-]/g,
      "",
    );
    setEmail(filteredValue);
  }}
/>

删除之后测了下就正常了，确实是这里的问题。后续解决方案就是去除这个逻辑，如果需要对内容校验，使用原生 pattern 实现结合 validity.valid 属性验证即可。

<Input
  ref={emailRef}
  type="email"
  value={email}
  onChange={(ev) => setEmail(ev.target.value)}
  required
  pattern="^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$"
/>

// emailRef.current?.validity.valid 这样验证

另外简单列下今晚做了什么事：

• 给小窝前端加入 PrismJS 高亮代码功能（AI 辅助）
• 给小窝前端部分引入媒体标签功能
• 给摄影集卡页面组件增加“点击角色后查询该角色下的所有图片”的功能

• 调试小窝工具箱插件，兼容 B 站新版本的会员购页面

  • 小窝后端对应的手办保存接口支持 png 格式的图片（因为不知道为什么会员购的服务器只会返回 png 了，要是有在 B 站的朋友可以反馈下）