아이폰 사파리에서 가상키보드 변경하기

아이폰 사파리 웹 브라우저를 이용하여 웹서핑을 할때

input 박스나 textarea에 터치를 하면

아이폰 키보드가 나타나 문자를 입력할수 있습니다.

아이폰에는 여러가지 형태의 키보드(키패드)가 존재합니다.

숫자만 입력하는 용도의 키보드, 일반키보드, 메일용키보드, url입력용 키보드 등...

웹어플리케이션에서도 해당 입력폼의 양식에 맞는 키보드를 나타낼 수 있습니다.




input type="text"

일반적인 형태의 키보드입니다.

input type="text"를 사용하면 나타납니다.





input type="tel"

전화번호 입력용 키보드 입니다.

input type="tel" 로 표현이 가능하며

0-9까지의 숫자와 +*#의 기호를 입력할수 있습니다.






input type="url"

url 입력용 키보드 입니다

input type="url"로 사용이 가능하며

url 입력용 키보드이기 때문에 스페이스바 대신 .(닷), /(슬래시), .com(닷컴 등)이 포함된

키보드가 나타납니다.





input type="email"

input type="email"로 이메일용 키보드를 나타낼수 있습니다.

1/3크기로 줄어든 스페이스바와 @(앳), .(닷)이 포함된 키보드 입니다.





input type="text" pattern="[0-9]*"

zipcode 입력용 numeric keyboard(숫자형 키보드) 입니다.

input type="text"에 pattern 속성을 더하여 나타낼수 있습니다.

pattern 속성값 안에는 정규표현식이 들어갑니다.

위 예제의 [0-9]* 는 0부터 9까지의 숫자를 입력하는 정규표현식을 나타냅니다.



input type 속성의 값으로 사용된 tel, url, email과 같은 값들과

pattern 속성은 HTML5에서 정의된 스펙입니다.


input type 속성값들
input의 pattern 속성



아이폰전용 속성이나 규격이 아니라

가까이에서 html5의 스펙을 사용해 볼수 있는 아이폰용 사파리입니다.

입력양식에 맞는 키보드를 사용하여 모바일 웹사용자들에게 편의를 제공한다면

모바일 웹서핑이 더더욱 즐거울것 같습니다.