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.
The difference between type=tel and type=numberLet 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:
XML/HTML Code Copy content to clipboard