Shulou(Shulou.com)06/01 Report--

This article mainly introduces what the commonly used HTML5 mode has related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this commonly used HTML5 mode article, let's take a look.

The difference between type= "tel" and type= "number"

Here, let's first explain the problems we first encountered. Neither tel nor number is perfect:

Type= "tel"

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

The disadvantage is that those letters are so superfluous. I still feel weird even though I don't have obsessive-compulsive disorder.

2015714164110643.jpg (860 × 292)

Type= "number"

The advantage is that a real numeric keyboard is implemented under Android.

Deficiency 1: it is not a nine-grid keyboard under iOS, so it is not convenient to enter.

Disadvantage two: the old version of Android (including the X5 kernel used by Wechat) had a super chicken-ribbed tail in the back of the input box, but fortunately it was removed after Android 4.4.4.

2015714164221441.jpg (850 × 314)

2015714164934721.jpg (711 × 186)

But for missing point two, we can use the pseudo element private to webkit to drop it to fix:

XML/HTML Code copies content to the clipboard

Input [type=number]::-webkit-inner-spin-button

Input [type=number]::-webkit-outer-spin-button {

-webkit-appearance: none

Appearance: none

Margin: 0

}

Pattern attribute

Pattern is used to verify the input of the form. Usually, the type attributes of HTML5, such as email, tel, number, data class, url, etc., already have a simple data format verification function. With pattern, the front-end part of the verification is more simple and efficient.

Obviously, the attribute value of pattern uses a regular expression.

Example

Simple digital verification

There are two validations for numbers:

XML/HTML Code copies content to the clipboard

2015714165030738.jpg (850 × 314)

These two regularities have the same effect on form validation, and there is a big difference in performance:

In iOS, only [0-9] / * can adjust the Nine Palace numeric keypad. / d is invalid.

Android 4.4 and below (including X5 kernel), both of which adjust the numeric keypad

Android 4.4.4 or above, only the type attribute is recognized, that is, if the above code changes type= "number" to type= "text", the full keyboard will be adjusted instead of the nine-grid numeric keyboard.

Common regular expressions

The usage of pattern is the same. Instead of writing it in detail, just list some common regularities:

Credit card [0-9] {13516}

UnionPay card ^ 62 [0-5] / d {13jue 16} $

Visa: ^ 4 [0-9] {12} (?: [0-9] {3})? $

MasterCard: ^ 5 [1-5] [0-9] {14} $

QQ number: [1-9] [0-9] {4pc14}

Mobile number: ^ (13 [0-9] | 14 [5 | 7] | 15 [0 | 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9] | 18 [0 | 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9]) / d {8} $

ID card: ^ ([0-9]) {7Jet 18} (x | X)? $

Password: ^ [a-zA-Z] / w {5j 17} $, which starts with a letter and is between 6x18 and contains only letters, numbers and underscores.

Strong password: ^ (? =. * / d) (? =. * [a murz]) (? =. * [Amurz]). {8pm 10} $contains a combination of uppercase and lowercase letters and numbers, and cannot use special characters. The length is between 8 and 10.

7 Chinese characters or 14 characters: ^ [/ u4e00-/u9fa5] {1 u4e00-/u9fa5 7} $| ^ [/ dA-Za-z_] {1 pm 14} $

Browser support

Unfortunately, pattern's browser support is poor:

2015714165051443.jpg (713 × 393)

But if you just change the numeric keypad as mentioned at the beginning of the article, both iOS and Android will be fine.

This is the end of the article on "what are the commonly used HTML5 modes?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the commonly used HTML5 modes". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.