如何复制 Safari 的“模式”属性？

Posted 2023-05-09

【中文标题】如何复制 Safari 的“模式”属性？

【英文标题】：How do I duplicate the "pattern" attribute for Safari?

【发布时间】：2017-03-26 22:11:02

【问题描述】：

我有一个在线商店的客户在客户将表情符号和特殊字符放入特定文本输入字段时遇到问题。我们只希望他们能够使用空格、数字、字母和带有重音符号和变音符号等的字母。当我尝试这个解决方案时，它奏效了。

pattern="[ A-zÀ-ÿ0-9]"

问题是，它适用于我们测试过的所有浏览器，除了 Safari。我是一个严肃的 javascript n00b；我自己已经成功编写了 JQuery 和 Javascript 函数，它们已经完成了我需要它们做的事情，但我的问题是双重的：

我将如何编写一个复制此模式功能的普通 JS 或 JQuery 函数？

更重要的是（因为我见过的可能的解决方案都省略了此信息），我如何实际将其链接到输入以便它首先工作？

感谢您能给我的任何帮助！

【问题讨论】：

无论你在客户端做什么，你总是需要清理服务器端。无论客户端脚本如何，都非常容易提交任何内容

尝试在你的模式中用\s 替换空格" "，看看Safari 是否能找到它

【参考方案1】：

已修复！答案出乎意料地简单。一个 polyfill，根据这个网站：

http://www.useragentman.com/blog/2010/07/27/creating-cross-browser-html5-forms-now-using-modernizr-webforms2-and-html5widgets-2/

这是我使用的大致代码。原来另一个开发者已经添加了整个 Modernizr.min.js 脚本来解决另一个问题。

<script type="text/javascript" src="/path/js/Modernizr-2.5.3.forms.js"></script>

<script type="text/javascript" data-webforms2-support="validation" src="/path/js/html5Forms.js" ></script>

链接到两个站点以下载 Modernizr 和 HTML5 表单，以方便遇到同样问题的任何用户。

https://modernizr.com/download?setclasses&q=input%20pattern https://github.com/zoltan-dulac/html5Forms.js/tree/master