The input applet uses setData to trigger the bindinput event

background

The UI design is shown below

Code implementation

This. SetData ({inputValue: ”});

The problem

There is a problem on Android phones. When the input component is in focus state, click the “Clear” button and the input box will blink, while the keyboard remains pop-up state. The content in the input box is not deleted, and can only be deleted after clicking again

To solve

I noticed that the above problem was caused by an additional bindinput event being triggered when the clear button was clicked, reassigning the value in the input field to the inputValue. I initially thought that the extra Bindinput event was triggered because the input was out of focus. But it turns out that clicking on a blank space does not trigger the bindinput event

The return value of bindinput has a keyCode property. This property is only available when typing on the keyboard, and is used to record the input key value. So I added a layer of judgment to Bindinput. If you have the keyCode property you’re going to do the rest of the operation.

defects

In developer tools, the return value of bindinput does not contain keyCode, so the inputValue will not be assigned to inputValue during debugging. You need to comment on keyCode.

doubt

This problem only occurs when the input component is in focus state. This problem does not occur if you click clear when the input component is not focus, so this bug may also be related to listening on bindinput and Bindblur or bindfocus at the same time