Hit rate used input tag comparable to the probability of winning the lottery is not, fill in your name, telephone, address, e-mail, identity information, etc. in web development,? While HTML5 has given more comprehensive type type, but I to Tucao it is how bad these types of compatibility that the following is a summary of some of the problems I encountered and solutions:
A, number type groove points:
1, although it will default on a real machine to pop digital input, however, to enter numbers and letters, and seems to have no obstruction , may I ask you what's the difference between text and type it (the simulator is no problem) focus here,
Solution: <the INPUT of the type = "Number The" pattern = "[0-9] *" > red part of that is plus;
2, yes, he has a second groove point, can not limit the length , to know that these products are anxious to fill the phone and identity card information for you, you have that information malformed fool never expect to cross the border, they can not even phone numbers are not allowed to let you enter more than one, there are times I solemnly added to the number maxlength = 11, soon to be tested her door, she said good only enter 11 it, hey, or the technology is not strong enough, change chant
Solution: this.telValue = this.telValue.slice (0,11) , here I use the method to monitor value changes @input value of Vue, the only interception of the first 11-bit display;
3, there is a small trough point, by the way, use the number type in the pc side, right side up and down arrow will appear, it is affecting the appearance, but also very simple want to get rid
解决办法： input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield; }
Two, text point groove
Frankly, this is not the text trough point, this should be the trough point products, are often asked to input text box can only be a combination of Chinese, numbers and letters, and the letters of the Chinese , the content of other expressions, symbols and the like even enter into the form is not qualified, we can give the wrong prompt ah, allowing users to pay attention to the pictures, but since the product is the boss, and never acts!
solution:
This is a screenshot of friends, where do borrow example shows, each with different needs, do not make them here, if demand, self Google