Pop-up questions about the keyboard for different mobile development mobile phones

Pop-up questions about the keyboard for different mobile development mobile phones
Recently, when I was working on a mobile phone page, I encountered a number Input Keyboard problem. The previous practice was just to use type = "tel" in a one-size-fits-all manner ", however, I always think that the English letters on the keyboard of the phone number of the jiugongge are too inconvenient. As a result, the final conclusion was frustrating to try other implementation schemes. However, I also took the opportunity to learn more about the pattern attribute. Type = "tel" and type = "number"

Here we should first explain the problems we encountered. In fact, whether it istelOrnumberNone of them are perfect:

Type = "tel"

• The advantage is that both iOS and Android have similar keyboard performance.

• The disadvantage is that those letters are redundant. Although I have no obsessive-compulsive disorder, it still feels strange.

Type = "number"

• The advantage is that a real digital keyboard is implemented in Android.

• Disadvantage 1: iOS is not a jiugongge keyboard, which is inconvenient to input

• Disadvantage 2: The old Android version (including the X5 Kernel used) will have a super chicken tail behind the input box. Fortunately, it will be removed after Android 4.4.4.

But for disadvantage 2, we can fix it with the private pseudo elements of webkit:

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

Pattern attributes

patternUsed to verify the content of the form input.typeProperties, suchemail,tel,number,dataClass,urlAnd has provided a simple data format verification function. After the pattern is added, the front-end verification is simpler and more efficient.

Obviously,patternTo use a regular expression.

Simple numeric verification for instances

Two numbers are verified:

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

For form verification, the two regular expressions serve the same purpose, and the performance is significantly different:

• In iOS, only[0-9]\*To enable the Nine-cell digital keyboard,\dInvalid

• Android 4.4 or lower (including X5 kernel), both of which enable a digital keyboard;

• Android 4.4.4 or above, only recognizetypeAttribute, that is, if the above Codetype="number"Changetype="text"The entire keyboard instead of the Nine-cell digital keyboard.

Common Regular Expressions

patternThe usage is the same. I will not comment on the detailed writing here, but just list some common Regular Expressions:

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

• UnionPay card^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 phone 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]){7,18}(x|X)?$

• Password:^[a-zA-Z]\w{5,17}$It must start with a letter and have a length of 6 ~ It can only contain letters, numbers, and underscores.

• Strong Password:^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$A combination of uppercase and lowercase letters and numbers. special characters are not allowed and the length must be between 8 and 10.

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

Browser support

Unfortunately, the browser support for pattern is miserable:

However, iOS and Android are okay if you change the keyboard as mentioned at the beginning of the article.