Comment utiliser les balises d'entrée dans les mini-programmes WeChat (avec code)

Le contenu de cet article concerne l'utilisation de balises d'entrée dans les mini-programmes WeChat (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Au cours du processus de développement, nous sommes souvent confrontés à une telle exigence : les utilisateurs ne peuvent saisir que des nombres et ne conserver que deux décimales. Bien que nous puissions le vérifier lors de la soumission du formulaire, l’expérience n’est pas très bonne. Ci-dessous, j'utilise principalement la méthode bindinput de la balise d'entrée de l'applet pour surveiller la valeur d'entrée, puis effectuer une correspondance régulière.

1. balise d'entrée

La balise d'entrée de l'applet WeChat a son propre attribut type=digit, qui peut appeler un clavier numérique avec un point décimal. L'attribut maxlength peut contrôler le nombre de caractères. nous saisissons, puis nous lions la méthode bindinput à la balise d'entrée.

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

2. Liaison des événements d'écoute

La méthode bindinput peut surveiller la valeur de la zone de saisie actuelle, similaire à l'événement onchange, mais pas la même. La valeur d'entrée peut être obtenue via e.detail.value et la chaîne renvoyée peut remplacer la chaîne d'entrée.

3. Correspondance régulière

Si la correspondance régulière est réussie, tous les caractères seront renvoyés. Si elle n'est pas transmise, le dernier caractère sans correspondance sera supprimé et renvoyé.

/*正则匹配*/
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);
    }
}

Recommandations associées :

Développement d'un mini programme – Tutoriel d'exemple de balise d'entrée

Mini programme WeChat : Rendu Utilisation de balises

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!