HTML enterkeyhint 속성 기준 정리

HTML enterkeyhint 속성 기준 정리

enterkeyhint는 모바일 가상 키보드의 Enter 키에 어떤 동작 라벨이나 아이콘을 보여줄지 지정하는 HTML 속성이다. 2026년 7월 18일 기준 WHATWG HTML Living Standard를 보면 이 속성은 제출, 검색, 다음 필드 이동처럼 사용자의 의도를 키보드 UI에 더 분명하게 드러내기 위한 힌트로 정의된다.

실무에서 헷갈리는 지점은 세 가지다. 어떤 값을 넣을 수 있는지, inputmode와 무엇이 다른지, 그리고 이 속성을 넣었다고 실제 동작까지 강제되는지다. 이 글은 표준 문서 기준으로 그 경계를 짧게 정리한다.

enterkeyhint는 무엇을 바꿀까?

WHATWG HTML 표준은 enterkeyhint를 가상 키보드의 Enter 키에 표시할 동작 라벨 또는 아이콘을 지정하는 열거형 속성으로 설명한다. 핵심은 입력값 자체를 바꾸는 기능이 아니라, 사용자가 지금 Enter를 누르면 어떤 흐름이 이어질지 더 잘 이해하도록 돕는 UI 힌트라는 점이다.

따라서 검색창에서는 검색 실행을, 채팅 입력창에서는 전송을, 다단계 폼에서는 다음 필드 이동을 암시하는 식으로 쓸 수 있다. 반대로 이 속성만으로 폼 제출 로직이나 포커스 이동 로직이 자동으로 구현되는 것은 아니다.

쓸 수 있는 값은 무엇일까?

표준이 정의하는 값은 enter, done, go, next, previous, search, send 일곱 가지다.

• enter: 보통 줄바꿈 같은 일반 Enter 동작을 뜻한다.
• done: 입력을 마쳤다는 의미를 준다.
• go: 사용자를 특정 대상이나 화면으로 이동시키는 실행을 암시한다.
• next: 다음 텍스트 입력 필드로 넘어가는 흐름에 맞다.
• previous: 이전 입력 필드로 돌아가는 흐름에 맞다.
• search: 검색 결과를 보여주는 동작에 맞다.
• send: 메시지 전송이나 요청 전달처럼 텍스트를 목적지로 보내는 흐름에 맞다.

이 값들은 모두 "무엇을 표시하면 더 도움이 될지"에 대한 힌트다. 즉 같은 값이라도 실제 키 모양이나 문구는 브라우저와 운영체제 입력기 구현에 따라 달라질 수 있다.

inputmode와는 무엇이 다를까?

inputmode는 어떤 종류의 입력 방식이 가장 적절한지 지정한다. 예를 들어 숫자 위주의 키패드를 띄울지, 이메일 입력에 유리한 키보드를 띄울지 같은 문제를 다룬다. 반면 enterkeyhint는 이미 떠 있는 가상 키보드에서 Enter 키가 어떤 의미로 보이게 할지를 다룬다.

즉 inputmode가 키보드 전체 레이아웃에 가까운 힌트라면, enterkeyhint는 Enter 키 한 개의 역할 표시에 가까운 힌트다. 둘은 경쟁 관계가 아니라 함께 쓰는 편이 자연스럽다.

<input
  type="search"
  inputmode="search"
  enterkeyhint="search"
  placeholder="검색어 입력">

이 예시는 검색에 맞는 입력 방식과 Enter 키 의미를 같은 방향으로 정렬하는 패턴이다. 검색창, 주소 입력창, 다단계 가입 폼처럼 사용자의 다음 행동이 분명한 경우에 특히 유용하다.

어디에 적용할 수 있을까?

표준은 enterkeyhint를 폼 컨트롤과 editing host에서 지원할 수 있다고 설명한다. 여기에는 일반적인 input, textarea 같은 입력 요소뿐 아니라 contenteditable을 사용하는 편집 영역도 포함될 수 있다.

이 말은 곧 단순 로그인 폼뿐 아니라 메모 편집기, 댓글 입력 박스, 채팅 컴포저 같은 UI에도 적용 가능하다는 뜻이다. 다만 실제 효과는 가상 키보드가 있는 환경에서 더 직접적으로 드러난다.

값은 어떤 기준으로 고르면 될까?

선택 기준은 Enter를 눌렀을 때 사용자가 기대해야 하는 다음 동작이 무엇인지다. UI 문구가 아니라 흐름을 기준으로 고르는 편이 안전하다.

• 검색 결과 화면이나 목록 갱신으로 이어지면 search가 가장 자연스럽다.
• 채팅, 댓글, 메시지 전송처럼 텍스트를 상대나 서버로 보내면 send를 우선 검토한다.
• 여러 입력 칸을 순서대로 채우는 폼이면 중간 단계에는 next, 역방향 이동이 있으면 previous를 쓸 수 있다.
• 입력이 끝나고 키보드를 닫는 쪽이 맞으면 done이 어울린다.
• 특정 목적지로 이동하거나 실행을 촉발하는 의미가 더 강하면 go를 검토한다.
• 줄바꿈이 기본인 편집 영역이면 enter가 가장 보수적인 선택이다.

주의할 점은 무엇일까?

첫째, enterkeyhint는 힌트이지 강제 규칙이 아니다. 표준은 어떤 라벨이나 아이콘을 제시하면 도움이 될지를 정의하지만, 실제 표시와 입력기 동작은 사용자 에이전트 구현에 달려 있다.

둘째, 이 속성은 입력 검증이나 제출 처리 자체를 대신하지 않는다. 예를 들어 send를 넣었다고 Enter가 반드시 메시지를 전송하는 것은 아니므로, 자바스크립트나 폼 처리 로직은 별도로 맞춰야 한다.

셋째, 데스크톱 물리 키보드 기준의 일반 Enter 동작까지 이 속성 하나로 통제하려고 보면 안 된다. 이 속성의 표준 정의는 가상 키보드에서의 표시 힌트에 초점이 있다.

FAQ

Q. enterkeyhint를 넣으면 Enter 키 동작도 자동으로 바뀔까?

아니다. 표준은 가상 키보드의 Enter 키에 어떤 동작을 암시할지 정의할 뿐, 애플리케이션 로직 자체를 자동으로 바꾸지 않는다. 실제 제출, 전송, 포커스 이동은 별도 구현이 필요하다.

Q. inputmode가 있으면 enterkeyhint는 없어도 될까?

둘의 역할이 다르기 때문에 대체 관계로 보는 것은 부정확하다. inputmode는 어떤 종류의 키보드가 유리한지, enterkeyhint는 Enter 키 의미를 어떻게 보여줄지가 핵심이다.

Q. textarea나 contenteditable에도 쓸 수 있을까?

표준은 폼 컨트롤과 editing host에서 이 속성을 지원할 수 있다고 설명한다. 따라서 단일 줄 입력창뿐 아니라 편집 가능한 텍스트 영역에도 적용 가능하다.

정리

enterkeyhint는 모바일 입력 경험을 미세하게 다듬는 속성이지만, 검색창과 메시지 입력창처럼 사용자의 다음 행동이 분명한 UI에서는 효과가 크다. 2026년 7월 18일 기준 WHATWG HTML Living Standard에 따르면 이 속성은 가상 키보드 Enter 키의 의미를 드러내는 힌트이며, inputmode와 함께 쓸 때 의도가 더 또렷해진다.

운영 기준으로는 실제 로직을 먼저 정하고, 그 로직을 가장 잘 설명하는 값을 search, send, next 같은 키워드로 표현하면 된다. 반대로 동작 구현 없이 라벨만 바꾸는 식의 사용은 사용자 기대와 UI가 어긋날 수 있다.

참고 자료

• WHATWG HTML Living Standard: enterkeyhint attribute
• WHATWG HTML Living Standard: inputmode attribute