HTML inputmode 속성 – 가상 키보드의 입력 모드 설정

`inputmode` 속성의 정의 및 사용법

inputmode 속성은
가상 키보드가 있는 모든 장치(예: 모바일이나 태블릿)에서 입력 필드나 편집 가능한 콘텐츠의 가상 키보드 모양을 명시적으로 설정하는 속성입니다.
사용자에게 가상 키보드를 사용할 상황에서 좀 더 유용한 가상 키보드 입력 모드를 제공해 줄 수 있습니다.

이 속성은 HTML의 입력 가능한 컨트롤 요소나 contenteditable="true" 속성을 사용하여 편집이 가능하게 된 요소의 가상 키보드 입력 모드를 명시적으로 설정함으로써, 사용자에게 더 유용한 사용자 경험(User Experience, UX)을 제공하는데 사용됩니다.

HTML contenteditable 속성

예시

위 예시 코드와 같이 inputmode 속성의 값을 "numeric"로 설정하면 브라우저는 아래의 캡쳐 화면과 같은 가상 키보드를 제공합니다.

참고하세요!
가상 키보드의 모양이나 사용자 인터페이스는 디바이스나 브라우저와 사용자 언어에 따라 달라질 수 있습니다.

`inputmode` 속성 값

inputmode 속성 값과 설명
`inputmode`	설명	기본 예제 가상 키보드의 모양이나 사용자 인터페이스는 디바이스나 브라우저와 사용자 언어에 따라 달라질 수 있습니다.
`inputmode="none"`	가상 키보드를 표시해서는 안 됩니다.
`inputmode="text"`	초깃값입니다. 사용자의 현재 지역(locale)에 대한 텍스트를 입력할 수 있는 가상 키보드를 표시해야 합니다.
`inputmode="tel"`	전화번호 입력이 가능한 가상 키보드를 표시해야 합니다. 여기에는 숫자 `0`~`9`, `#` 문자 및 `*`문자에 대한 키가 포함되어야 합니다. 전화번호 입력이 반드시 필요할 경우, 이 값을 사용하기 보다는 HTML의 의미론적인 측면을 고려해서 `<input type="tel">`을 사용하는 것이 좋습니다.
`inputmode="url"`	사용자의 현재 지역(locale)에서 텍스트 입력이 가능한 가상 키보드를 표시해야 하며, `/` 및 `.` 문자와 같은 URL 입력을 보조하기 위한 키 및 `www.` 또는 `.com`과 같은 도메인 이름에서 일반적으로 발견되는 문자열의 빠른 입력을 위한 키가 있어야 합니다. URL 입력이 반드시 필요할 경우, 이 값을 사용하기 보다는 HTML의 의미론적인 측면을 고려해서 `<input type="url">`을 사용하는 것이 좋습니다.
`inputmode="email"`	사용자의 현재 지역(locale)에서 텍스트 입력이 가능한 가상 키보드를 표시해야 하며, `@` 문자 및 `.` 문자와 같은 이메일 주소 입력에 도움이 되는 키가 있어야 합니다. 이메일 주소 입력이 반드시 필요할 경우, 이 값을 사용하기 보다는 HTML의 의미론적인 측면을 고려해서 `<input type="email">`을 사용하는 것이 좋습니다.
`inputmode="numeric"`	숫자 입력이 가능한 가상 키보드를 표시해야 합니다. 이 키워드는 PIN 입력에 유용합니다. 숫자 입력이 반드시 필요할 경우, 이 값을 사용하기 보다는 HTML의 의미론적인 측면을 고려해서 `<input type="number">`를 사용하는 것이 좋습니다.
`inputmode="decimal"`	분수 숫자 입력이 가능한 가상 키보드를 표시해야 합니다. 숫자 키와 현재 지역(locale)의 형식 구분자를 표시해야 합니다.
`inputmode="search"`	검색에 최적화된 가상 키보드를 표시해야 합니다. 검색 쿼리가 필요한 입력이 반드시 필요할 경우, 이 값을 사용하기 보다는 HTML의 의미론적인 측면을 고려해서 `<input type="search">`를 사용하는 것이 좋습니다.

🔊 inputmode 속성이 지정되지 않은 경우(또는 브라우저가 지원하지 않는 상태)에는 브라우저가 보여줄 기본 가상 키보드를 결정합니다. 예를 들어, <input>에 사용되는 type이나 pattern 속성과 같은 상황 정보를 사용하여 사용자에게 어떤 유형의 가상 키보드를 제시해야 하는지 결정합니다.

가상 키보드의 Enter 키에 대해 표시할 텍스트나 아이콘의 모양 등의 레이블(action label)을 명시적으로 설정하려면 enterkeyhint 속성을 사용하세요.