How to use input tags in WeChat mini programs (with code)

The content of this article is about the use of input tags in WeChat mini programs (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the development process, we often encounter such a requirement: users can only enter numbers and only retain two decimal points. Although we can verify when submitting the form, the experience is not very good. Below I mainly use the bindinput method of the applet input tag to monitor the input value, and then perform regular matching.

1. input tag

The WeChat applet input tag has its own type=digit attribute, which can call up a numeric keyboard with a decimal point. The maxlength attribute can control the number of characters we input, and then We bind the bindinput method to the input tag.

<input type="digit" bindinput="regInput" maxlength="15"/>

2. Binding listening events

The bindinput method can monitor the value of the current input box, similar to the onchange event, but not the same. The input value can be obtained through e.detail.value, and the returned string can replace the input string.

3. Regular matching

If the regular matching is passed, all characters will be returned. If not, the last unmatched character will be removed and returned.

/*正则匹配*/
regInput(e){
    if(/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)){
        return e.detail.value;
    }else {
        return e.detail.value.substring(0,e.detail.value.length-1);
    }
}

Related recommendations:

Mini Program Development--Input Label Instance Tutorial

WeChat Mini Program: Rendering Labels use

The above is the detailed content of How to use input tags in WeChat mini programs (with code). For more information, please follow other related articles on the PHP Chinese website!