WeChat ミニ プログラムで入力タグを使用する方法 (コード付き)

この記事の内容は、WeChat ミニプログラムでの入力タグの使用に関するものです (コード付き)。必要な友人が参考になれば幸いです。

開発プロセスでは、ユーザーが数値のみを入力でき、小数点以下 2 桁のみを保持できるという要件に遭遇することがよくあります。フォームを送信するときに確認することはできますが、エクスペリエンスはあまり良くありません。以下では主にミニプログラムのinputタグのbininputメソッドを使って入力値を監視し、定期的なマッチングを行っています。

1. 入力タグ

WeChat アプレットの入力タグには、小数点付きの数値キーボードを呼び出すことができる独自の type=digit 属性があり、入力する文字数を制御できます。メソッドを入力タグに追加します。

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

2. バインディング リスニング イベント

bindinput メソッドは、onchange イベントと似ていますが、同じではなく、現在の入力ボックスの値を監視できます。入力値は e.detail.value を通じて取得でき、返された文字列で入力文字列を置き換えることができます。

3. 通常のマッチング

通常のマッチングが渡された場合は、すべての文字が返されます。渡されなかった場合は、最後に一致しなかった文字が削除されて返されます。

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

関連する推奨事項:

ミニ プログラム開発 -- 入力タグのサンプル チュートリアル

WeChat ミニ プログラム: レンダリング タグの使用

以上がWeChat ミニ プログラムで入力タグを使用する方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。