[Cross browsing] 아이폰에서 input/textarea에 글자 입력 안되는 현상.
안녕하세요. 오랜만입니다.
최근 들어간 프로젝트는 반응형 외부 사이트 멤버십 사이트였습니다.
프로젝트 중반에 해당 기업 사이트가 개편이 됨에 따라 멤버십 사이트 디자인도 전부 변경이 되었어요.
그래서 코로나가 기승을 부리는 때에도 굉장히 바쁘게 보냈던 것 같아요. 감사한일입니다.
css 팁 메뉴로 들어가는 내용도 실은 작업하면서 부딪혔던 일들이어서
작업일지로 들어가는게 맞으나, 그때 그때 기록을 남기지 못해서 그런지 그 때 상황이 전부 기억나지 않아요.
이 메뉴에 들어오는 아이들은 작업 당시의 기억이 나는 것 위주로 올리려고 합니다.
자 이제 각설하고, 본론으로 들어갈게요.
모바일 디바이스 크로스 브라우징을 하며 발견한 이슈입니다.
아이폰 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로 적용해주었습니다.
아이폰/안드로이드 크롬 브라우저에서 정상 작동하는 것까지 확인 마쳤습니다.