DEV/WEB

[Cross browsing] 아이폰에서 input/textarea에 글자 입력 안되는 현상.

RAMY,LEE 2020. 12. 13. 19:38

 

 

안녕하세요. 오랜만입니다.

 

최근 들어간 프로젝트는 반응형 외부 사이트 멤버십 사이트였습니다.

프로젝트 중반에 해당 기업 사이트가 개편이 됨에 따라 멤버십 사이트 디자인도 전부 변경이 되었어요.

그래서 코로나가 기승을 부리는 때에도 굉장히 바쁘게 보냈던 것 같아요. 감사한일입니다. 

css 팁 메뉴로 들어가는 내용도 실은 작업하면서 부딪혔던 일들이어서

작업일지로 들어가는게 맞으나, 그때 그때 기록을 남기지 못해서 그런지 그 때 상황이 전부 기억나지 않아요. 

이 메뉴에 들어오는 아이들은 작업 당시의 기억이 나는 것 위주로 올리려고 합니다.

 

자 이제 각설하고, 본론으로 들어갈게요.

 

Photo by Patrick Slade on Unsplash.

 

모바일 디바이스 크로스 브라우징을 하며 발견한 이슈입니다.

아이폰 input/textarea에 텍스트 입력이 안되는 현상이었어요. 

제가 해당 화면을 작업하고 기기 테스트를 할 때는 멀쩡했기 때문에 정말 깜짝 놀랐습니다. 

단계별 확인을 거쳤습니다.

 

1단계 - 정말 아이폰에서만 안되는 현상인가? : YES, 안드로이드에선 문제가 없었습니다.

 

2단계 - Form 요소가 들어간 다른 페이지에서도 동일하게 발생하는가? :

YES, text field에 해당하는 요소들이 전부 같은 현상이었습니다.

 

3단계 - 해당 현상에 대한 구글링 : 같은 케이스에 대한 글을 찾음.

 

4단계 - 솔루션 적용.

 

5단계 - 기기 테스트 : 아이폰, 안드로이드 폰 둘 다 확인. -> 정상 작동.

 

 

문제는 "아이폰 크롬 브라우저"에서 "user-select:none;"적용 시 발생하는 문제였습니다.

 

왜 이런 문제가 발생하였는가?

퍼블리싱 작업 후, 개발 팀장님께서 해당 화면 작업 중 "텍스트 복사 금지"에 대한

css 처리가 필요하다라는 요청을 하셨습니다. 

그래서 

 

body *  {

 

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

user-select: none;

 

}

 

이렇게 적용하였고, 저 속성에 대해 제대로 파악하지 못해서 생긴 일이었습니다.

내부 사이트를 주로 작업 해오다 보니, 외부 사이트 진행 시 필요한 속성들에 대한 공부가 부족했던 것 같습니다.

이번 프로젝트를 진행하며 소소한 배움이 많았어요.

 

위 문제는

 

아래와 같이 해결이 되었습니다.

 

body * 에 적용한 위 속성을 body로 옮겨 적용한 후, 

 

input, textarea {

 

-moz-user-select: auto;

-webkit-user-select: auto;

-ms-user-select: auto;

user-select: auto;

 

}

 

input과 textarea에 user-select를 auto로 적용해주었습니다.

아이폰/안드로이드 크롬 브라우저에서 정상 작동하는 것까지 확인 마쳤습니다.