본문 바로가기

webkit

(3)
아이폰 사파리에서 이미지 새로고침 안될 때(Feat. 캡챠, Webkit 엔진) 로그인 페이지에 캡챠가 적용되어 있다. '새로고침'을 누르면 당연히 캡챠가 새로고침 되어야 한다. 물론 내가 할 땐 잘됐다. 그런데 테스트를 해보시더니 캡챠 문자열 새로고침이 안된다고 한다. "아이폰에서 안되요." 처리 프로세스 서버로 캡챠 새로고침을 요청한다. 이미지 element의 src attribute에 캡챠 이미지를 세팅한다. '/capcha/image' API 에서는 세션에 저장된 캡챠값을 이미지로 생성하여 반환한다. $.ajax('/captcha/refresh').done(function () { imgElement.attr('src', '/captcha/image'); }); 그런데 아이폰(=사파리=웹킷 엔진)에서는 이..
아이폰의 모든 브라우저는 사파리다 const isIosApp = window.webkit && window.webkit.messageHandlers; 나는 웹 기반으로 제작된 하이브리드 앱을 유지보수 하고 있다. iOS앱 내부에서 접속되었는지 위와 같은 Javascript 코드를 사용하여 판별했는데, 아이폰의 Chrome 브라우저에서 true가 리턴되는 것을 확인했다. 조금 서칭 해보니, 애플의 정책에 의해 앱스토어에 올라가는 앱들은 웹콘텐츠 로딩을 위해 WebKit 엔진을 사용한다는 내용을 찾을 수 있었다. However, there's one major thing that makes Chrome on iOS very different from all other Chrome platform implementations. Chrome o..
input type number를 비밀번호로 표시하기 문제 HTML input type 속성은 하나의 타입만 허용한다. number냐, password냐 둘 중 하나를 골라야 한다. 그런데 숫자만 입력 받고, 모바일에서 숫자 키패드가 뜨고, 비밀번호로 표시하고 싶다면? CSS 비표준 스타일을 추가해준다. 예제 코드 HTML CSS .input-number-password { -webkit-text-security: disc; } 설명 type="number" 숫자 인풋이다. inputmode="numeric" 모바일 디바이스에서 일반 키패드 대신 숫자 키패드를 띄운다. class="input-number-password" 웹킷 힌트를 준 클래스를 적용하였다. -webkit-text-security 값으로는 disc 말고도 square나 circle 등이 올..