Some commonly used HTML5 patterns (patterns) summary

This article mainly introduces some commonly used HTML5 patterns (patterns) summary, including some commonly used regular expressions, mainly for the production of mobile web pages. Friends who need it can refer to it.

Recently, when I was working on a mobile phone page, I encountered the problem of a keyboard with numeric input. The previous approach was just one-size-fits-all use type=tel, but I always felt that the English letters on the keyboard with a nine-grid phone number are too intrusive. So I wanted to try other implementation solutions, but the final conclusion was frustrating. However, I also took the opportunity to learn more about the pattern attribute.

Let me explain the initial problems. In fact, neither tel nor number are perfect:

type=tel

The advantage is that the keyboard performance of iOS and Android is similar

The disadvantage is that those letters are superfluous. Although I don’t have obsessive-compulsive disorder, I still feel weird.

type=number

The advantage is a real numeric keyboard implemented under Android

Disadvantage 1: It is not a nine-grid keyboard under iOS, so it is inconvenient to enter it

Disadvantage 2: The old version of Android (including the X5 core used by WeChat) will have a super useless tail behind the input box. Fortunately, Android 4.4.4 has been removed.

However, for shortcomings 2, we can use the pseudo-elements privately owned by webkit to fix: