input type=password ios/aos 폰트 크로스브라우징 이슈

이슈`input type="password"`는 값을 입력하면 value가●●●●● 형태로 출력이 되는데, 이 도트의 사이즈가 브라우저별로 상이하여디자인적으로 value가 input 가로사이즈 영역을 넘어서는 문제, 크로스브라우징 문제가 발생했다. 검색결과문제는 (2016년 기준) 비밀번호 입력란에 파이어폭스와 인터넷 익스플로러는 유니코드 코드포인트를 사용하는 '검은 동그라미'(●) 문자를 사용하지만, 크롬은 ' 25CF불렛'(•) 문자를 사용한다는 점이다. ios safari 에서도 큰 검은 동그라미 형태로 출력되어, 디자인적으로 input 가로사이즈 영역을 넘어서는 문제가 발생하게 되었다.  해결방법'pass' 라는 base64 사용자정의 글꼴을 사용하여 도트의 사이즈를 통일했다.placeholde..

2023.04.06

input type number를 비밀번호로 표시하기, 모바일 숫자키패드

HTML input type 속성은 하나의 타입만 허용한다. number나, password냐 둘 중 하나를 골라야 한다. 그런데 숫자만 입력 받고, 모바일에서 숫자 키패드가 뜨고, 비밀번호로 표시하고 싶다면? HTML CSS .input-number-password{ -webkit-text-security: disc; } 설명 type="number"는 숫자 인풋이다. inputmode="numeric" 모바일 디바이스에서 일반 키패드 대신 숫자 키패드를 띄운다. class="input-number-password" 웹킷 힌트를 준 클래스를 적용했다. -webkit-text-security 값으로는 disc 말고도 square나 circle 등이 올 수 있으나, disc가 가장 일반적인 패스워드 표시 ..

2022.08.17