input 고찰

inputMode

현재 회사에서 웹앱을 개발 중인데 스크린 개발하다가 새로운 키워드를 발견했다 바로 inputMode라는 attribute인데 웹앱 사용 시 type으로 하여 가상키보드를 컨트롤하고 있었다. 예를 들어 전화번호나 숫자만 입력해야하면 type="tel"을 주는 형태로 사용하고 있었는데, 이번에 autoComplete 이슈로 mdn에서 input attribute를 확인하다가 inputMode라는 키워드를 발견했고 웹앱에서는 무척 유용한 값임을 확인했다.

• inputMode
  • 해당 문서에 따르면 사용자가 입력할 수 있는 데이터 유형을 암시하는 열거형 속성으로 이를 통해 브라우저는 적절한 가상 키보드를 표시할 수 있다고 한다.
  • input에 type="number" 로 설정하게 되면 input 우측에 값을 조절할 수 있는 화살표 필드가 생기면서 해당 디자인을 해지할 수 있는 추가 css 코드가 필요했고,
    팀 내 컨벤션에서는 input에 입력가능한 타입을 대부분 string으로 설정하고 onChange 로직에서 별개로 컨트롤하는 경우가 많았기 때문에 숫자키보드만 보여야하는 경우에는 type="tel"코드를 사용하고 있었다.
    (이 경우 문제 사항이 숫자만 입력 가능해야하는데 갸상 키보드에서는 *, +, - 등의 일부 기호를 사용할 수 있는 문제가 있었다.)
  • 이렇다보니 inputMode의 사용이 나름의 유레카랄까.. 덕분에 웹앱에서 기존의 코드보다 좀 더 적절한 가상키보드를 보여줄 수 있게 되었다.

자동완성 멈춰!

두번째 이슈사항은 chrome 자동완성의 이슈였다. 사내에서 보통 어드민 페이지를 많이 개발하고 있는데, 어드민 로그인 시 저장한 계정 정보로 인해 관리자 계정을 추가할 때 화면이 렌더되면서 저장했던 내 계정 정보가 email 및 password input에 자동으로 입력되는 이슈가 있었다.
해당 이슈의 경우 input > autoComplete="new-password"를 걸어주면 이슈가 발생하지 않지만..

두번째 이슈가 발생했다.
비밀번호 입력 시 기존에 저장했던 내 계정 정보를 추천해주는 option이 발생하는데, 해당 스크린에서 해당 저장정보를 불러오게 되면 email과 password input에 자동으로 입력되는 문제가 발생했다. 이렇게 보면 큰 문제가 아닌 것 같지만...
email이 없는 화면에서는 phone number input에 해당 내 계정의 email 정보가 들어가는 이슈가 발생했다. (멈춰..!) 물론 number만 들어가도록 컨트롤을 하고 있어서 문제가 없어보이지만, 이슈가 발생한 걸 확인한 이상 수정을 해야한다고 판단했다.

그래서 사용한 두 번째 방법은 아래와 같다.

  <input
        type="email"
        name="user_email_randomString"
        id="email_randomString"
        tabIndex={-1}
      />
  <input type="password" tabIndex={-1} />

원리는 저장된 정보를 여기서 먼저 받아와서 입력되게 하여 본 form에는 입력되지 않게 하는 것..
위의 2가지 방법을 모두 사용해야 정상적으로 동작하는 것으로 보인다.(원인 파악은 아직 다 못했다. 사실 아직도 이해안됨)

게시물을 일기장처럼 쓰는 걸 고치고 싶은데 쉽지 않다. 개요에 대해 따로 작성을 하던가 해야할듯 싶다. 이것도 블로그 이전하면 템플릿을 셀프로 어느정도 만들어야하지 않을까..하고 조심스럽게 생각 중. 학교 다니면서 작업하기 쉽지않다