최근 개발한 모바일 웹사이트 프로젝트를 배포하고 핸드폰으로 접속하니, input/textarea로 개발된 부분이 글자가 작성안되는 오류를 겪었다.
이는 css의
{
-webkit-user-select : none;
}
이 속성을 "none"하면
사용자가 요소를 선택 할 수 없게하여 복사를 못하게 하는데, 입력도 할 수 없다는 것이었다....😮..
근데 나는 저 css를 지정조차 하지 않았는데, 아무래도 nomalize.css를 적용해서 같이 적용되지 않았나 싶다.
CSS 속성: user-select
사용자가 요소의 내용을 선택할 수 있는지 여부를 결정한다.
user-select: auto | none | text | all;
default css 설정하는 파일에 input
과 textarea
에 -webkit-user-select : auto;
값을 설정 하였다.
input, textarea {
-webkit-user-select : auto;
}
다시 재배포하고 핸드폰으로 접속하니, 잘 작성된다! 😋
저도 현재 진행하는 프로젝트에서 사파리 브라우저에서만 동일한 이슈가 있었는데 크롬만 고려하는 환경이라 그냥 넘어갔었는데 생각나서 놀러왔다가 꿀팁 배워가네요 :)