The problem that [Chinese] can still be input and pasted when the input box type of mobile terminal is number

Time:2019-12-27

First of all, this problem is very difficult, because it may be a bug in the browser. When the user enters Chinese in the input box of type = number, this value will not be received, but sometimes it will be displayed. That is, it will be displayed like a normal value, but the parameters of two-way binding cannot receive Chinese value, which is generally an empty string. A kind of

Type = number will lift the numeric keypad, which is preferred by many product designs, but at present, the systems (browsers) are not compatible with this.

This type of input generally comes from non-standard input or empty input box focus, even if the type = number, IOS keyboard will also recommend common Chinese on it

principle

Click the recommended Chinese above the input method, and the onchange function will not be triggered. Maybe this is a paste operation, or there is no difference between before and after values (Chinese is blocked or empty string)

At the same time, onkeydown and so on will not be triggered. This behavior is like a ghost behavior, unable to locate.

Solve

After a variety of events, it turns out that oninput listens to this behavior (as I should have thought).

But the way of grasping input value is slightly different. Take Vue for example, it should be $event.data, and the parameter received by oinput is inputevent, that is, input event, not dom.

And the received value is the current input / paste value, not all the values in the input box.

The author finds that oninput can’t prevent bubbling and default behavior like onkeydown.

The final solution of the author is

1.Store old values when Keydown, all inputs share one variable

2.Check the added value in oninput, you can use regular and other methods.

3. If it passes the verification, no operation is required.When it does not pass, the value of the input bidirectional binding is assigned the old value, which may trigger the update of input, and there will be no Chinese or flash. The performance is that Chinese is not input.

Solution 2

Instead of input = number, write your own keyboard component, but remember to consider compatibility.

Thank you for reading. If you have a better solution, I hope you can give it in the comments and discuss it together. Thank you very much.