이 기능은 가장 인상적이지 않은 기능처럼 보일 수 있지만, 모두가 모바일에서 입력하는 것을 싫어하기 때문에 중요하다고 생각합니다. 저도 싫어합니다. Android용 Chrome (2015년 4월 현재 Chrome 43 이전 - 베타)에서는 개발자가 브라우저가 사용자가 텍스트를 입력하는 데 어떻게 도움을 줄 수 있는지 거의 제어할 수 없습니다. 현재 기기에서 입력하면 다음과 같이 표시될 수 있습니다.
Android에서 이름으로 인식한 일부 값을 제외하고 모든 값이 소문자로 표시됩니다.
Apple은 iOS 5에서 HTMLInputElement 및 HTMLTextAreaElement에 자동 대문자 사용이라는 속성을 도입했습니다. 이 속성을 사용하면 페이지 작성자가 사용자가 텍스트 입력을 최적화할 수 있도록 브라우저에서 가상 키보드를 표시하는 방법을 힌트할 수 있습니다. 가장 간단한 형태로 텍스트 상자가 모든 새 문장의 첫 글자를 자동으로 대문자로 표시해야 한다고 지정할 수 있습니다.
Chrome 43부터 Chrome은 HTMLInputElement 및 HTMLTextAreaElement 모두에서 자동 대문자 사용 속성을 지원합니다. 이를 통해 가상 키보드의 자동 대문자 사용 동작을 제어하고 iOS의 Safari와 일렬로 정렬할 수 있습니다.
자동 대문자는 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인 경우 잘못된 값 기본값은 문장 첫 글자만 대문자입니다. 그 외의 경우 대문자 사용 안함입니다.
<input autocapitalize="simon">는 문장 대소문자 사용이 적용된 텍스트 필드입니다.<input type="email" autocapitalize="simon">는 대소문자 구분 없음이 적용된 텍스트 필드입니다.<input>는 대소문자 구분 없음이 적용된 텍스트 필드입니다.
HTMLTextAreaElement의 경우 잘못된 값 기본값은 문장 대문자입니다. 이는 기본 동작과 다릅니다.
<textarea autocapitalize="terry"></textarea>는 문장 대소문자 사용이 적용된 텍스트 영역입니다.<textarea></textarea>는 문장 대소문자 사용이 적용된 텍스트 영역입니다.<textarea autocapitalize="none"></textarea>는 대소문자 사용 안함이 적용된 텍스트 영역입니다.
HTMLFormElement의 경우 이 속성을 구현하지 않기로 결정했습니다. 현재 페이지에서 거의 사용되지 않고 사용되는 경우에도 대부분 양식에서 자동 대문자 사용을 완전히 사용 중지하는 데 사용되기 때문입니다.
<form autocapitalize=off><input></form>
HTMLInputElement의 기본 상태는 대소문자 구분 없음이므로 위의 내용은 이상합니다.
inputmode 대신 이 방법을 사용하는 이유는 무엇인가요?
inputmode는 무엇보다도 동일한 유형의 문제를 해결하기 위한 것입니다.
그러나 브라우저 구현이 부족했습니다. 저희가 알기로는 Firefox OS에만 구현이 있으며 접두사가 붙습니다(x-inputmode). 또한 웹에서 사용 빈도가 매우 낮습니다. 반면 autocapitalize는 이미 수십만 개의 웹사이트에서 수백만 개의 페이지에 사용되고 있습니다.
언제 사용해야 하나요?
다음은 autocapitalize를 사용해야 하는 경우의 일부 목록입니다. 그러나 사용자가 텍스트를 입력하는 것을 돕는 것이 큰 가치를 제공하는 곳은 많습니다.
- 인 경우
- 사람 이름을 예상합니다 (참고: 일부 이름은 이 규칙을 따르지 않지만 대부분의 서양 이름은 예상대로 자동으로 대문자로 표시됨).
- 회사 이름
- 주소
autocapitalization=words을 사용하세요.- 다음을 예상하는 경우
autocapitalization=characters를 사용하세요.- 미국 주
- 영국 우편번호
- 일반 단락 형식으로 입력되는 콘텐츠(예: 블로그 게시물)를 예상하는 경우 입력 요소에
sentences를 사용합니다. - 영향을 받지 않아야 하는 콘텐츠(예: 코드 입력)를 예상하는 경우 TextArea에서
none를 사용하세요. - 힌트를 표시하지 않으려면 autocapitalize를 추가하지 마세요.