一些常用的HTML5模式(pattern) 总结

近期在开发手机页面时，我遇到了数字输入键盘的问题。原本的做法是直接使用type="tel"，但九宫格电话号码键盘上的英文字母始终让我觉得有些多余。于是，我开始尝试其他的解决方案，然而结果并不尽如人意。这也让我对HTML的pattern属性有了更深入的了解。

我们来谈谈type="tel"和type="number"的区别。

对于type="tel"，其优点在于iOS和Android的键盘表现都较为一致。九宫格键盘上的英文字母对于追求简洁的我来说，确实有些多余。至于type="number"，在Android上它可以提供一个真正的数字键盘，但在iOS上却并非九宫格键盘，输入不太方便。旧版Android（包括微信所用的X5内核）在输入框后面会出现一个不太友好的小尾巴，好在Android 4.4.4之后这个问题得到了解决。

针对旧版Android的这个问题，我们可以使用webkit的伪元素进行修复。具体代码如下：

```css

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

```

接下来，我们再来谈谈pattern属性。这一属性主要用于验证表单输入的内容。对于像email、tel、number等HTML5的type属性，已经自带了简单的数据格式验证功能。而加上pattern后，前端部分的验证将更为简单高效。

pattern的属性值需要使用正则表达式来定义。比如，对于数字的验证，可以使用以下两个实例：

```html

```

不同平台对于正则表达式的表现存在差异。在iOS中，只有使用[0-9]才能调起九宫格数字键盘，而\d则无效。在Android 4.4以下（包括X5内核），两者都可以调起数字键盘；而在Android 4.4.4以上，系统只认type属性。这意味着，如果我们把type="number"改为type="text"，系统将调起全键盘而非九宫格数字键盘。

除了上述差异，还有一些常用的正则表达式供我们参考。比如，信用卡号码、银联卡号码、Visa卡号、万事达卡号等等都有对应的正则表达式进行验证。还有QQ号码、手机号码、身份证号、密码等也有相应的正则表达式。关于这些正则表达式的详细写法，这里不再赘述，只列出一些常用的供我们参考。

关于pattern的浏览器支持并不理想。但是如果我们只是像文章开头提到的那样想要改变数字键盘的话，iOS和Android都是没有问题的。