이 기능은 현존하는 가장 인상적이지 않은 기능처럼 보일 수 있지만, 모두가 모바일에서 타이핑하는 것을 싫어하므로 이 기능이 중요하다고 생각합니다. 여러분도 싫어합니다. Android용 Chrome (2015년 4월 기준 Chrome 43 이전 - 베타 버전)에서 개발자가 브라우저에서 사용자의 텍스트 입력에 도움이 되는 방식을 제어할 수 없습니다. 현재 기기에 입력 중인 경우 다음과 같이 표시될 수 있습니다.
Android에서 이름으로 인식한 일부 값을 제외하고 모든 것이 소문자로 표시됩니다.
Apple은 HTMLInputElement 및 HTMLTextAreaElement에 iOS 5에서 autocapitalize라는 속성을 도입했으며, 이를 통해 페이지 작성자는 이 속성을 사용하여 브라우저에서 사용자를 위해 텍스트 입력을 최적화할 수 있도록 가상 키보드를 표시하는 방법을 힌트로 제공할 수 있습니다. 가장 간단한 형태로 텍스트 상자에서 모든 새 문장의 첫 글자를 자동으로 대문자로 표시할 수 있습니다.
Chrome 43부터 Chrome은 HTMLInputElement와 HTMLTextAreaElement에서 모두 autocapitalize 속성을 지원합니다. 이를 통해 가상 키보드의 자동 대문자화 동작을 제어하고 iOS의 Safari에서 인라인으로 가져올 수 있습니다.
autocapitalize 내용은 type 속성이 type="text", type="search", type="url", type="tel", type="email" 또는 type="password"로 설정된 HTMLInputElement에만 적용됩니다. 기본값은 자동 대문자화하지 않는 것입니다.
다음은 텍스트 영역에서 문장을 자동으로 대문자로 표시할 수 있는 간단한 예입니다.
<textarea autocapitalize="sentences">
자동 대문자화를 사용할 수 있는 값은 무엇인가요?
다음 표는 입력 요소의 다양한 상태를 보여줍니다.
| 상태 | 키워드 | |
|---|---|---|
<input><input autocapitalize=off>
|
대문자를 사용하지 않음 | 없음[기본값] |
| 사용 안함 | ||
<input autocapitalize=characters> |
문자 대문자 사용 | 문자 |
<input autocapitalize=words> |
단어 대문자 사용 | 단어 |
<input autocapitalize=sentences> |
문장 대문자 사용 | 문장 |
HTMLInputElement의 경우, 요소의 유형이 type=text 또는 type=search이면 기본값은 Sentences Capitalization입니다. 그렇지 않으면 No Capitalization입니다.
<input autocapitalize="simon">은 문장 대문자가 포함된 텍스트 필드입니다.<input type="email" autocapitalize="simon">는 대문자 사용 안함으로 표시된 텍스트 필드입니다.<input>는 대문자 사용 안함으로 표시된 텍스트 필드입니다.
HTMLTextAreaElement의 경우 잘못된 값 기본값은 Sentences Capitalization입니다. 이는 기본 동작에서 변경된 것입니다.
<textarea autocapitalize="terry"></textarea>은 문장 대문자가 포함된 텍스트 영역입니다.<textarea></textarea>은 문장 대문자가 포함된 텍스트 영역입니다.<textarea autocapitalize="none"></textarea>는 대소문자 없음이 적용된 텍스트 영역입니다.
HTMLFormElement의 경우 이 속성을 구현하지 않기로 했습니다. 오늘날 페이지에서 이 속성이 거의 사용되지 않으며, 속성이 사용될 때 주로 양식에서 자동 대문자화를 사용 중지하는 데 이 속성이 사용되기 때문입니다.
<form autocapitalize=off><input></form>
위와 같은 경우는 이상한데, HTMLInputElement의 기본 상태가 대문자 사용 안함이기 때문입니다.
inputmode을(를) 통해 사용하는 이유는 무엇인가요?
inputmode는 무엇보다도 동일한 유형의 문제를 해결하기 위한 것입니다.
하지만 브라우저 구현이 부족했습니다. Google에서 확인한 바에 따르면 Firefox OS에만 구현이 있고 앞에 x-inputmode가 붙어 있지만 웹에서는 거의 사용되지 않습니다. 반면 autocapitalize는 이미 수십만 개의 웹사이트의 수백만 페이지에서 사용되고 있습니다.
언제 사용해야 하나요?
다음은 autocapitalize를 사용해야 하는 경우에 대한 전체 목록은 아닙니다. 그러나 사용자가 텍스트를 입력하도록 지원하는 데는 큰 이점이 있습니다.
- 다음과 같은 경우
autocapitalization=words를 사용하세요.- 예상 인물 이름 (참고: 모든 이름이 이 규칙을 따르는 것은 아니지만 대다수의 서양 이름에서는 예상대로 자동으로 대문자로 표기됩니다.)
- 회사 이름
- 주소
- 예상한 경우
autocapitalization=characters를 사용합니다.- 미국 주
- 영국 우편번호
- 일반적인 단락 형식으로 입력되는 콘텐츠(예: 블로그 게시물)를 예상하는 경우 입력 요소에
sentences를 사용합니다. - 영향을 받지 않아야 할 콘텐츠를 예상하는 경우 TextAreas에서
none를 사용합니다(예: 코드 입력). - 힌트를 표시하지 않으려면 자동 대문자화를 추가하지 마세요.