So verwenden Sie Eingabe-Tags in WeChat-Miniprogrammen (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von Eingabe-Tags in WeChat-Miniprogrammen (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Während des Entwicklungsprozesses stoßen wir häufig auf eine solche Anforderung: Benutzer können nur Zahlen eingeben und nur zwei Dezimalstellen beibehalten. Obwohl wir beim Absenden des Formulars überprüfen können, ist die Erfahrung nicht sehr gut. Im Folgenden verwende ich hauptsächlich die bindinput-Methode des Eingabe-Tags des Miniprogramms, um den Eingabewert zu überwachen und dann einen regelmäßigen Abgleich durchzuführen.

1. Eingabe-Tag

Das WeChat-Applet-Eingabe-Tag verfügt über ein eigenes Attribut „type=digit“, mit dem eine numerische Tastatur mit einem Dezimalpunkt aufgerufen werden kann. Das Attribut „maxlength“ kann die Anzahl der Zeichen steuern Wir geben ein und binden dann die bindinput-Methode an das Eingabe-Tag.

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

2. Bindung von Listening-Ereignissen

Die bindinput-Methode kann den Wert des aktuellen Eingabefelds überwachen, ähnlich dem onchange-Ereignis, aber nicht dasselbe. Der Eingabewert kann über e.detail.value abgerufen werden, und die von return zurückgegebene Zeichenfolge kann die Eingabezeichenfolge ersetzen.

3. Reguläre Übereinstimmung

Wenn die reguläre Übereinstimmung bestanden wird, werden alle Zeichen zurückgegeben. Wenn sie nicht bestanden wird, wird das letzte nicht übereinstimmende Zeichen entfernt und zurückgegeben.

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

Verwandte Empfehlungen:

Mini-Programmentwicklung – Beispiel-Tutorial für Eingabeetiketten

WeChat-Miniprogramm: Verwendung von Rendering-Labels

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Eingabe-Tags in WeChat-Miniprogrammen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!