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

지혜의 Devlog 📚·2021년 10월 7일
0
post-thumbnail
post-custom-banner

🕵🏻 사건 발단

최근 개발한 모바일 웹사이트 프로젝트를 배포하고 핸드폰으로 접속하니, 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 설정하는 파일에 inputtextarea-webkit-user-select : auto; 값을 설정 하였다.

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

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

post-custom-banner

2개의 댓글

comment-user-thumbnail
2021년 11월 28일

저도 현재 진행하는 프로젝트에서 사파리 브라우저에서만 동일한 이슈가 있었는데 크롬만 고려하는 환경이라 그냥 넘어갔었는데 생각나서 놀러왔다가 꿀팁 배워가네요 :)

1개의 답글