인프런 커뮤니티 질문&답변
작성한 질문수
왓섭 로그인 ux 관련 질문 2가지가 있습니다..!
작성
·
962
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
안녕하세요. 데이먼님은 아니지만 제가 도움드릴수 있을거 같아서 남깁니다.
1. 주민번호 앞자리 뒷자리 텍스트 필드가 있다는 조건하에
앞자리 텍스트필드에 text changed라는 인터렉션을 걸고 length 조건문을 달아준 다음
focus - target을 뒷자리에 걸고 아래이미지처럼 해당 텍스트필드를 커서를 select하라고 걸어주면
해결됩니다.
2. 딤부분과 바텀쉬트영역을 hide시켰다가 버튼을 클릭한다던가 위에처럼 텍스트필드에 조건물을 걸어서 show 시킨 것으로 보여집니다. 거기에 애니메이션을 추가한 것 같습니다.
어떤 애니매이션인지는.. 저도 궁금하네요 ㅎㅎ
0
블루라이언님 답변 감사합니다.
구현에 참고하실 수 있는 관련 강의 링크 공유드립니다.
1. 주민번호 Focus는 블루라이언님 글과 아래 이미지를 참고해서 구현하실 수 있습니다.
2. 하단 레이어 팝업은 아래 강의의 (3:20) 부분을 참고하셔서 lightbox 옵션을 적용하고 slide up 애니메이션을 적용하시면 됩니다.
Show/Hide 기능 마스터 (lightbox, flyout, push/pull widget)
왓섭 샘플 파일은 다른 분이 작업하신 샘플입니다. 누구신지는 저도 잘 모르겠네요 ^^;;