피드로 돌아가기
Dev.toFrontend
원문 읽기
RichEditor 전환을 통한 전화번호 포맷팅 커서 튐 현상 해결
TextInput sets mobile phone number format input - How to solve the issue of cursor position disorder after modifying data?
AI 요약
Context
HarmonyOS TextInput의 onChange 콜백 기반 데이터 포맷팅 과정에서 발생하는 Cursor Position disorder 문제 분석. 값 재할당 시 커서가 강제로 문서 끝으로 이동하는 제약 사항으로 인해 사용자 입력 경험 저하 발생.
Technical Solution
- TextInput의 후처리 방식 한계를 극복하기 위해 입력 전 이벤트 제어가 가능한 RichEditor로 컴포넌트 교체
- aboutToIMEInput 및 aboutToDelete 콜백을 통한 입력값 사전 가로채기 및 상태 제어
- 공백을 제외한 실제 숫자 인덱스를 계산하는 getRealOffset 로직 구현을 통한 정밀한 데이터 매핑
- 원본 숫자 스트링(originalPhoneNumber) 유지와 포맷팅된 출력 스트링의 분리 관리 구조 채택
- 텍스트 스팬 삭제 후 재삽입 및 setCaretOffset 호출을 통한 의도적인 커서 위치 복구 메커니즘 설계
실천 포인트
1. 입력값 포맷팅 시 단순 값 바인딩보다 입력 전 이벤트(Pre-edit event) 제어 가능 여부 검토
2. 포맷팅 문자와 실제 데이터 인덱스 간의 매핑 테이블 또는 계산 로직 분리 설계
3. 표준 입력 컴포넌트의 제약으로 커서 제어가 불가능할 경우 RichEditor와 같은 저수준 텍스트 컨트롤러 도입 검토