Hybrid App - number keypad, none draggable

Hybrid App

하이브리드 앱은 겉은 앱으로 둘러싸고, 내부는 웹 페이지로 만든 앱을 만한다. 앱을 씌우는 이유는 핸드폰의 알림이나 사진찍기, 전화받기 등의 액션이 웹에서는 할 수 없기 때문이고, 내부는 웹 페이지로 만드는 이유는 오타 등등의 앱 업데이트 시에는 구글 플레이스토어나 애플 앱스토어의 승인?을 받아야 하는데 웹 페이지는 서버에 반영하면 별도의 앱 업데이트가 필요하지 않기 때문이다. 이루다투자 앱도 하이브리드로 만들어졌다.

화면 드래그 막기

전체 페이지의 드래그를 막고 싶다면 아래와 같이 작성해주면 된다.

* {
 user-drag: none
 user-select: none
 -moz-user-select: none
 -webkit-user-drag: none
 -webkit-user-select: none
 -ms-user-select: none
}

user-select

• auto: Default값으로 더블클릭 및 드래그할 경우 선택 가능
• all: 더블클릭이 아니더라도 클릭만으로 선택 가능
• none: 선택 안됨
• text: 선택 가능

IOS에서 숫자 키패드 적용 방법

AOS에서는

<input type="number" />

만 지정해주어도 숫자 키패드 적용이 되는데 IOS에서는 적용되지 않는다. IOS에서는 아래의 코드를 추가해주어야 숫자 키패드가 적용된다.

<input type="number" pattern="[0-9]*" />