[스크랩] [Mobile] 모바일웹, input type 에 따른 아이폰 키보드의 변화

[펌] input type에 관련해 정리가 아주 잘 되어있음.

http://htglss.tistory.com/74

아이폰으로 인터넷을 하다보면은 여러가지 폼에다가 입력을 해야 할 경우도 많습니다. 아이폰을 사용해보신 분들은 아시겠지만 상황에 따라서 다른 키보드가 뜨는데요. 오늘은 input 박스의 type에 따라 다르게 뜨는 키보드의 모양의 분석해 보겠습니다.

우선 기본적으로 나오는 type=text 일 경우에는 다음과 같은 키보드가 나옵니다.

text일 경우에는 기본적인 키보트가 뜹니다. 인풋박스들이 <form> 태그에 쌓여있기 때문에 아래에는 "go" 라고 버튼이 뜹니다.

그렇다면 다음에 있는 땡땡땡 부분은 다들 아시다시피 password 부분입니다. 그 곳에 포커스가 가게 되면,

위와 같은 키보드가 돌출하게 되는데, 한가지 다른 점은 처음에 입력하는 값을 대문자로 입력하게 해주는, shift가 안눌려있습니다.

다음은 이메일인데, type을 email로 했을 경우에는 아주 친절하게도 @ 와 . 이 나오게 됩니다. 입력하기 참 쉽겠죠?

type=number 에 포커스 되었을 때는 특수문자를 눌렀을 경우와 같은 키보드가 나옵니다.

오늘의 하일라이트, type=tel 일경우에는 전화번호를 쉽게 입력할 수 있도록 전화번호 키패드가 뜨게 됩니다. 이거 정말 마음에 드네요. 주민등록번호나 전화번호를 입력할 때 사용하면 좋을 듯 합니다.

url의 경우도 email과 비슷합니다. url을 쉽게 입력할 수 있도록 /(슬래시)와 .com(닷컴)이 나오게 됩니다. 입력할 때 편하겠네요.

type=search 일 경우는 "Go" 부분이 "Search"로 변하고 나머지는 동일합니다. 다른 것들은 text와 동일하게 뜨므로 이미지는 생략하였습니다.