• 카테고리

    질문 & 답변
  • 세부 분야

    기획 · 전략 · PM

  • 해결 여부

    미해결

왓섭 로그인 ux 관련 질문 2가지가 있습니다..!

21.10.21 18:26 작성 조회수 747

0

안녕하세요. 선생님

왓섭 회원가입 UX 문의 드립니다.

2가지 질문이 있습니다.

 

1) 주민등록번호 앞 7자리 입력 후 뒤 1자리 자동 입력 포커스 UX는 어떻게 구현하나요?

○○○○○○○-○●●●●●●

텍스트필드로 구현하고 있는데, 앞 7자리 숫자 입력하고나서 

자동으로 뒷자리 1자리에 포커스로 가고 싶습니다.

 

2) 하단 레이어 팝업은 어떻게 구현할까요..?

버튼 TAP 시 자동으로 하단 슬라이드 팝업 오픈 후 그외 BG영역은 딤처리가 되는 기능입니다.

 

누구신지는 모르겠지만..(혹시 데이먼님 이신가용?)

https://zg0gge.axshare.com/#id=577tlb&p=register_page&g=12&sc=2&hi=1

 

whatusp_login > register page

여기에 제가 원하는 구현이 다 되어있거든요.

 

답변 주시면 감사하겠습니다 ㅠ

 

 

 

답변 2

·

답변을 작성해보세요.

2

블루라이언님의 프로필

블루라이언

2021.10.21

안녕하세요. 데이먼님은 아니지만 제가 도움드릴수 있을거 같아서 남깁니다.

 

1. 주민번호 앞자리 뒷자리 텍스트 필드가 있다는 조건하에

앞자리 텍스트필드에 text changed라는 인터렉션을 걸고 length 조건문을 달아준 다음 

focus - target을 뒷자리에 걸고 아래이미지처럼 해당 텍스트필드를 커서를 select하라고 걸어주면 

해결됩니다.

 

 

2. 딤부분과 바텀쉬트영역을 hide시켰다가 버튼을 클릭한다던가 위에처럼 텍스트필드에 조건물을 걸어서 show 시킨 것으로 보여집니다. 거기에 애니메이션을 추가한 것 같습니다.

어떤 애니매이션인지는.. 저도 궁금하네요 ㅎㅎ 

블루라이언님 답변 감사합니다.
구현에 참고하실 수 있는 관련 강의 링크 공유드립니다.

1. 주민번호 Focus는 블루라이언님 글과 아래 이미지를 참고해서 구현하실 수 있습니다.

2. 하단 레이어 팝업은 아래 강의의 (3:20) 부분을 참고하셔서 lightbox 옵션을 적용하고 slide up 애니메이션을 적용하시면 됩니다.
Show/Hide 기능 마스터 (lightbox, flyout, push/pull widget)


왓섭 샘플 파일은 다른 분이 작업하신 샘플입니다. 누구신지는 저도 잘 모르겠네요 ^^;; 

0

antivimeo님의 프로필

antivimeo

질문자

2021.10.22

너무 감사합니다 두분!!!