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
pattern
Used 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
pattern
The 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