이 기능은 가장 인상적이지 않은 기능처럼 보일 수 있지만, 모두가 모바일에서 입력하는 것을 싫어하기 때문에 중요하다고 생각합니다. 저도 싫어합니다. 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를 추가하지 마세요.