Mobile development different phone pop-up digital keyboard problem

Recently in the mobile phone page, encountered the problem of digital input keyboard, the previous practice is only one-size-fits-all use type= "tel", but always think nine Gongge phone number on the keyboard of the English letter is too much of a hindrance. To try out other implementations, the final result is frustrating. But also took the opportunity to learn more about the pattern of this property. Type= the difference between "tel" and type= "number"

Here is the first to explain the first problems encountered. In fact, whether tel or number not is perfect:

Type= "Tel"

• The advantage is that both iOS and Android have the same keyboard performance

• The disadvantage is that the letters are superfluous, although I do not have obsessive-compulsive disorder but still feel strange ah.

Type= "Number"

• The advantage is a true numeric keypad implemented under Android

• Disadvantage one: iOS is not nine Gongge keyboard, input inconvenient

• Disadvantage two: The old version of Android (including the X5 kernel used) after the input box will have a super chicken tail, after the Android 4.4.4 removed.

However, for the disadvantage of two, we can use WebKit private pseudo-element to fix off:

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

Pattern Property

patternUsed to validate form input, usually HTML5 properties, such as,,,, and type email tel number data url so on, have come with a simple data format verification function, and after the pattern, the front-end part of the validation is simpler and more efficient.

It is obvious that pattern the attribute values are to be used with regular expressions.

Example of simple digital verification

There are two verification of numbers:

<input type="number" pattern="\d"> 
<input type="number" pattern="[0-9]*"> 

For form validation, the two regular functions are the same, and the difference in performance is great:

• iOS, only [0-9]\* to be able to adjust the nine numeric keypad, \d invalid

• Android 4.4 or less (including the X5 kernel), both of which adjust the numeric keypad;

• Android 4.4.4 or above, only type attributes, that is, if the above code will type="number" change type="text" , will be the full keyboard and not the nine Gongge numeric keypad.

Common Regular Expressions

patternThe use of all the same, here no longer wordy various detailed wording, just listed some of the usual regular is good:

• Credit card[0-9]{13,16}

• UnionPay^62[0-5]\d{13,16}$

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

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

• QQ Number:[1-9][0-9]{4,14}

• 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:^([0-9]){7,18}(x|X)?$

• Password: ^[a-zA-Z]\w{5,17}$ Beginning of letter, length between 6~18, can only contain letters, numbers and underscores

• Strong password: ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ contains a combination of uppercase and lowercase letters and numbers, cannot use special characters, the length is between 8-10

• 7 Kanji or 14 characters:^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$

Browser support

Unfortunately, the browser support for pattern is miserable:

But iOS and Android are no problem if you just change the number pad as mentioned at the beginning of the article.

Mobile development different phone pop-up digital keyboard problem