문제 상황

구글 자동 양식 완성에 의해 화면에 위와 같이 value가 들어왔을 때 form-control이 동작하지 않는 상황이었다.

기존이라면 상호작용을 통해 value가 차있거나 focus를 주면 다음과 같이 바뀌었어야 했다.

폼에 상호작용을 하면 디자인이 변경되는 것을 알아보니 form-control이 동작하면 form-control-placeholder가 동작하는 것이었다.

문제 세부사항 확인

첫번째로는 단순하게 username, password input에 값이 차있으면 form control을 주도록 해보았다. 당연히 실패했다. 생각해보니 form-control의 동작 규칙은 value가 존재하면 동작하는 것이었는데 동작하지 않는 것으로 보아, 화면상으로는 값이 들어와있는데 value에는 값이 들어가지 않는 것이었다.

이를 로그로 찍어보고 새로운 사실을 발견했다.

500ms 마다 두 input태그의 value 길이를 확인해봤는데 계속 0으로 찍히다가, 화면을 직접 한번 클릭하니 길이가 6으로 정상적으로 들어온 모습이었다.

구글 AutoFill

조사결과 크롬 브라우저는 민감한 정보(특히 비밀번호 등)의 자동완성이 스크립트에 의해 악용되지 않도록 하기 위해, 자동완성 데이터를 외부에 쉽게 노출하지 않는 방식으로 처리한다고 한다.

이로 인해 자동완성 값이 사용자에게 보이더라도, 스크립트에서 해당 값을 읽어내기 어렵게 설계되어 있다고 한다. 즉 js로 하여금 autoFill의 값을 캐치하는 것은 불가능했고 크롬에서 직접 제공하는 -webkit-autofill을 활용하여야 했다.

해결

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder{
  -webkit-transform: translate3d(0, -120%, 0);
  transform: translate3d(0, -120%, 0);
  padding: 7px 0 0 0;
  opacity: 1;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: #01d28e;
  font-weight: 700; }

위와 같이 form-control-placeholder를 동작하도록 하는 css를 다음처럼 수정했다.

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder,
input:-webkit-autofill + .form-control-placeholder{
  -webkit-transform: translate3d(0, -120%, 0);
  transform: translate3d(0, -120%, 0);
  padding: 7px 0 0 0;
  opacity: 1;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: #01d28e;
  font-weight: 700; }