[Cross-Browsing] iPhone input/textarea 작성이 안된다?

🕵🏻 사건 발단

최근 개발한 모바일 웹사이트 프로젝트를 배포하고 핸드폰으로 접속하니, input/textarea로 개발된 부분이 글자가 작성안되는 오류를 겪었다.

🕵🏻 문제 발견

이는 css의

{
  -webkit-user-select : none;  
}

이 속성을 "none"하면
사용자가 요소를 선택 할 수 없게하여 복사를 못하게 하는데, 입력도 할 수 없다는 것이었다....😮..

근데 나는 저 css를 지정조차 하지 않았는데, 아무래도 nomalize.css를 적용해서 같이 적용되지 않았나 싶다.

잠시 멈춰~!🖐! [user-select] 속성 알아보기!

CSS 속성: user-select
사용자가 요소의 내용을 선택할 수 있는지 여부를 결정한다.

user-select: auto | none | text | all;

• auto
  사용자는 요소에서 내용을 선택할 수 있다.
• none
  사용자는 어떤 콘텐츠도 선택할 수 없다.
• text
  사용자는 요소에서 텍스트를 선택할 수 있다.
• all
  all은 단순 클릭 한 번만으로 텍스트 영역이 선택된다.

CSS property 웹사이트 참고

🕵🏻 문제 해결

default css 설정하는 파일에 input과 textarea에 -webkit-user-select : auto; 값을 설정 하였다.

input, textarea { 
  -webkit-user-select : auto;
}

다시 재배포하고 핸드폰으로 접속하니, 잘 작성된다! 😋