OTP같은 폼 코딩 할때

Question

OTP나 4자리 수 입력하는 코딩할때,인풋(type="password")를 1글자씩 입력하게 작게 만들고 4개를 만드는 방식으로 하나요?이렇게 하면 왠지 개발할때 뭔가 귀찮을것 같기도...아니면 하나의 인풋으로 하나요?근데 또 이러면 1개 입력하면 옆으로 슝 포커스 이동하고 이런거 또 어케 하나... ㅜㅜ결론적으로 4개짜리로 짠다 vs. 1개짜리로 짠다.무엇일까요?

오후 · Accepted Answer

1칸씩 4개 keyup등 이벤트로 입력 완료시 다음input 으로 focus

캐티 · Answer

어떡하나요. 보안에는 가독성을 희생하는 양보는 없쩌. 사실 머 위에 거는 실력이 좋음 편한 개발 방법이 차고 넘치는 거이고 굳이 ai가 판을 치는 시대에 실력을 논하며 직접 나서야 하겠나요. 사실머 ai가 글케 정교하지 아니하여서 해석하기에 여지가 다양하게쩌.

2948284 · Answer

1개씩 이죠 이벤트야 뭐 요새 프론트엔드 기술론 껌먹기

파아란_푸딩 · Answer

쉽게 구현하려면 4개를 쓸 수도 있지만, 접근성을 위해서는 1개를 써야 한다고 봅니다. OTP라면 붙여넣기도 구현해야 하고, 의외로 복잡한 컴포넌트가 되겠네요.리액트 사용 중시면 이 라이브러리 추천합니다: guilhermerodz/input-otpshadcn에도 OTP 컴포넌트가 있습니다(위 라이브러리 사용): Input OTP개발자 도구로 보시면 input 한 개로 구현되어 있습니다.

OTP같은 폼 코딩 할때

4개의 답변

#input 목록