아이폰에서는 모든 텍스트 입력하는 부분에 들어가있는 기본 기능들이 있다.
사파리 브라우져에서도 마찬가지로 동작을 하는데, 이것들을 몇 가지 속성 값을 통해 설정할 수 있다.
그리고 input 태그에서 입력받는 텍스트 내용에 따라 그에 맞는 키보드 자판이 나와주기를 원할 수 있을텐데 이것 또한 약간의 속성 지정으로 컨트롤 할 수 있다. 어플리케이션에서만 키보드를 선택할 수 있는 것이 아니니 웹사이트에서 잘 사용하면, 사용자에게 편한 UI를 제공할 수 있을 것이다.
1. 영문 첫글자 대문자 모드 없애기
텍스트를 입력받는 <input type="text" /> 태그가 있는 웹페이지를 아이폰 사파리로 들어가보면,
특정한 설정을 하지 않은 상태에서는 영문 키보드 상태가 첫글자는 대문자로 쓰는것이 기본으로 설정되어 있다.
로그인 아이디나 이메일을 입력하려는 곳에서 첫글자가 의도하지 않게 자꾸 대문자로 쓰이면 짜증이 날 수 있다.
자동으로 첫글자 대문자 모드로 되는 것을 막으려면 autocapitalize="off"를 사용하면 된다.
<input type="text" autocapitalize="off" />
2. 자동완성 사용 안하기
네이버 검색창에 검색어 입력할 때 추천검색어 같은것을 보여주는 그런 기능을 넣는다면 브라우져 자체에서 제공하는 자동완성이 거슬리게 될 것이다. 이것을 끄려면 autocomplete="off"를 사용하면 된다.
<input type="text" autocomplete="off" />
3. 자동교정(?) 사용 안하기
아이폰에는 기본으로, 텍스트 입력할 때 자동으로 오타를 수정해주는 기능이 있다. 이것이 동작 안하도록 하고 싶은 경우도 있을텐데 이것은 autocorrect="off" 를 사용하면 된다.
<input type="text" autocorrect="off" />
4. 필요에 맞는 키보드 나오게 하기
전화번호 입력 키보드를 나오게 하려면,
<input type="tel" />
URL 입력 키보드를 나오게 하려면,
<input type="url" />
Email 입력 키보드를 나오게 하려면,
<input type="email" />
숫자 입력 키보드를 나오게 하려면,
<input type="text" pattern="[0-9]*" />
또는
<input type="number" />
'이동' 버튼을 '검색'으로 나오도록 하려면,
<form><input type="search" /></form>
또는
<form><input type="text" name="q_search" /></form>
(name 속성값에 'search'가 포함되도록 하면 됨)
댓글을 달아 주세요