WeChat 미니 프로그램의 텍스트 영역 및 입력 관련 문제 요약

이 글에서는 WeChat 미니 프로그램에 대한 관련 지식을 소개합니다. 주로 미니 프로그램의 텍스트 영역과 입력 문제를 요약해서 소개합니다. 하지만 이 두 가지를 단독으로 사용하면 문제가 없습니다. 함께 나타나서 문제가 차례로 발생하면 모두에게 도움이 되기를 바랍니다.

【관련 학습 추천: 미니 프로그램 학습 튜토리얼】

위챗 미니 프로그램에는 텍스트 영역과 입력이라는 두 가지 기본 구성 요소가 있는데, 이 두 구성 요소를 단독으로 사용할 때는 문제가 없지만, 두 개가 같이 등장했는데, 문제가 연이어 발생했는데, 모두 매우 형이상학적인 문제였습니다. 개발 중에 이런 형이상학적인 문제가 발생했습니다. 간단한 양식 작성 페이지는 수동 구현 페이지를 구현하는 데만 며칠이 걸렸습니다. 오른쪽!

Rendering:

Thinking

이러한 형이상학적 문제를 특별한 방법으로 해결한 후 많은 생각을 했습니다.

• 텍스트 영역과 입력을 함께 사용할 때 이러한 형이상학적 문제가 발생하는 이유는 무엇입니까?

• 분명 평범하게 썼는데 왜 iOS 폰에서는 되는데 안드로이드 폰에서는 안되는 걸까요?

• 왜 가끔은 가능하지만 가끔은 안되나요?

...등등

앞으로 이러한 문제를 우회하지 않기 위해 텍스트 영역과 입력 사이의 사랑과 죽음을 탐구하기로 결정했습니다.

기계 테스트

기계 이 탐구에 사용된 기기는

Android 기기: Honor 20, Xiaomi 10s;

ios 기기: iPhone 13

여기에 형이상학적인 질문이 있습니다!

1. 바인딩 키보드 높이 변경 이벤트

문제: 텍스트 영역에 대한 바인딩 키보드 높이 변경 이벤트만 바인딩하면 입력도 텍스트 영역의 바인딩 키보드 높이 변경 이벤트가 트리거되고 트리거에 의해 전달되는 매개 변수는 모두 텍스트 영역의 매개 변수입니다.

모델: Android가 나타나야 합니다

예:

해결 방법: 솔루션을 찾을 수 없습니다

2.hold-keyboaed를 true로 설정할 때

문제: 텍스트 영역의 Hold-keyboaed 속성을 설정하고 다음으로 입력할 때 true 이고, 입력에 텍스트가 아닌 유형이 있는 경우 계속 전환하면 키보드 위의 완성이 중단되고 텍스트 영역이 더 이상 포커스되지 않습니다. 모델: Android가 나타나야 합니다

예제 gif:

해결 방법: 1. show-confirm-bar를 통해 키보드를 올릴 때 텍스트 영역 위에 완료 버튼을 표시하지 마세요. 2. 입력 유형을 텍스트로 설정하세요. 3. Hold-keyboaed를 true로 설정하지 마세요.

3. 텍스트 영역 침투 문제

문제: 고정 요소가 있는 경우 z-index 값을 아무리 설정해도 텍스트 영역 구성 요소가 고정 요소를 침투합니다. 모델: Android 가끔

신비한 점: 가끔 안 뜨는데 재컴파일할 때 코드를 스캔해서 미리보기 하면 텍스트 영역 침투 문제가 발생하는데, 그 이후에도 계속해서 발생합니다. 그런데 폰에서 미니 프로그램을 삭제하면 그럴 가능성이 있습니다. 코드를 다시 컴파일하고 스캔할 때 문제가 발생하지 않을 것이라고

예제 gif:

해결책: 텍스트 영역을 덮기 위해 고정 요소가 필요한 경우 텍스트 영역을 숨기거나 뷰 요소로 전환할 수 있습니다. 고정된 요소가 나타납니다

4.바인드포커스 이벤트 바인딩

문제: 텍스트 영역만 바인드 포커스 이벤트에 바인딩하는 경우 페이지에 진입한 후 바로 입력을 클릭하면 텍스트 영역의 포커스 이벤트가 발생합니다. 모델: Android. 예 gif:

해결 방법: 포커스를 사용하여 동적으로 만들 수 있습니다. 텍스트 영역의 포커스를 제어하고 입력 유형을 숫자 유형으로 설정하지 마세요

5.

문제: 키보드 리프팅 프로세스 중에 하단 또는 번역Y를 통해 수동으로 페이지 페이지를 들어올리고 전환 애니메이션 속성을 설정하면 텍스트 영역의 자리 표시자가 깜박이게 됩니다.

모델: Android가 나타나야 합니다

예제 gif:

해결책: 모델을 결정하고, iOS용 전환 속성을 추가하고, Android 시스템용 전환 속성을 추가하지 마세요

6. 클릭하여 완료할 때

문제: 텍스트 영역이 바인딩 키보드 높이 변경 이벤트를 사용하고 자체 완료를 사용하면 클릭하여 완료할 때 바인딩 키보드 높이 변경 이벤트가 트리거되지 않습니다.

모델: 가끔 Android

예제 gif:

해결 방법: 해결 방법 없음

7. 자동 높이 설정 시

문제: 텍스트 영역의 자동 높이 속성이 true인 경우 높이를 가져오기 위해 selectComponet을 사용할 때 문제가 발생하고 때로는 콘텐츠가 없습니다. 행의 초기 높이는 때때로 텍스트 영역의 기본 높이입니다

모델: ios 및 Android

해결책: 자동 높이 값을 동적으로 제어하거나 타이머를 사용하여 높이 획득을 지연시킵니다

8. 불일치

문제: 바인딩키보드변경 이벤트가 여러 번 발생하고 이벤트에서 얻은 키보드 높이가 일치하지 않는 경우도 있습니다.

모델: Android 경우에 따라

해결책을 찾을 수 없습니다.

9. 데이터 획득 시 정확도 문제

문제: selectComponet을 통해 요소의 높이, 너비 또는 위치를 얻을 때 기본적으로 모든 소수점(약 16자리)이 유지되므로 혼란이 발생할 수 있습니다. 애니메이션

모델: ios 및 Android 가끔

해결 방법: js 언어 자체에는 정확성 문제가 있으므로 selectComponent를 통해 데이터를 가져온 후 처리를 위해 소수점 두 자리만 유지하는 것이 가장 좋습니다

[관련 학습 권장 사항: Mini 프로그램 학습 튜토리얼]

위 내용은 WeChat 미니 프로그램의 텍스트 영역 및 입력 관련 문제 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!