반응형

INPUT 2

iOS에서 input type="number" 의 숫자 키패드 적용하기

모바일 작업을 진해할 때 가장 대표적인 안드로이드와 IOS(아이폰)의 환경을 최대한 비슷하게 구현해야 합니다. 하지만 의외로 IOS의 표준 동작은 우리가 예상하는것과는 다르게 동작할 때가 왕왕 있습니다. 우리는 숫자값을 입력받기 위해서 사용하기 위해 필드를 사용합니다. 안드로이드에서는 우리가 원하는 정상적인 방법으로 숫자 키패드가 적용되는데 IOS의 경우 기본적으로 상단에 숫자행으로 수정되어 특수문자가 혼용된 키보드가 기본적으로 적용되도록 되어 있습니다. 이는 숫자값만 필요한 필드에서 굉장히 불편한 UI 구조일 뿐 아니라 안드로이드와 IOS의 키패드가 다르게 동작된다는 점에서 사용자의 UX적인 측면에서도 좋지 않습니다. 이전에는 이런 경우 스크립트를 이용하여 강제로 키패드 패턴을 변경하는 방법을 사용하였..

IT/HTML & CSS 2022.08.17

placeholder 속성 수정하기

Input 요소나 Textarea에 가이드 텍스트를 제공할 때 아주 손쉽게 사용할 수 있는 게 html5 속성 중 placeholder속성입니다. 아주 예전에는 크로스 브라우징을 위해 스크립트를 이용하여 구현을 많이 했지만 요즘은 placeholder속성을 기본적으로 사용하는것 같습니다. 다만 이렇게 편리한 placeholder기능을 우리가 CSS로 수정하고 싶을 때 CSS에서 요소를 바로 수정해 보면 수정이 되지 않는 걸 알 수 있습니다. placeholder 속성의 컬러값을 바꾸고 싶으면 웹킷 전용 속성을 CSS에 사용해 주어야 하며 placeholder 속성은 IE 9 이상부터 정상적으로 지원합니다. /* 웹킷 전용 속성 */ input::-moz-input-placeholder {} input::..

IT/HTML & CSS 2021.03.11
반응형
//