WeChat 미니 프로그램에서 입력 태그를 사용하는 방법(코드 포함)

이 글의 내용은 WeChat 미니 프로그램(코드 포함)의 입력 태그 사용에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

개발 과정에서 우리는 종종 다음과 같은 요구 사항에 직면합니다. 사용자는 숫자만 입력하고 소수점 두 자리만 유지할 수 있습니다. 양식을 제출할 때 확인할 수는 있지만 경험이 그리 좋지는 않습니다. 아래에서는 주로 애플릿 입력 태그의 bininput 메소드를 사용하여 입력값을 모니터링한 후 정규 매칭을 수행합니다.

1. 입력 태그

WeChat 애플릿 입력 태그에는 소수점으로 숫자 키보드를 호출할 수 있는 고유한 type=digit 속성이 있으며, maxlength 속성은 입력하는 문자 수를 제어할 수 있습니다. 입력 태그에 대한 메소드입니다.

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

2. 바인딩 청취 이벤트

bindinput 메소드는 onchange 이벤트와 유사하지만 동일하지는 않지만 현재 입력 상자의 값을 모니터링할 수 있습니다. e.detail.value를 통해 입력 값을 얻을 수 있으며, return으로 반환된 문자열은 입력 문자열을 대체할 수 있습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!