들어가며
모바일 웹 환경에서 <input> 입력창을 만들다 보면,
“엔터를 눌러도 아무 반응이 없다”는 문제를 자주 겪게 됩니다.
데스크탑에서는 onKeyDown 이벤트가 잘 작동하는데,
모바일(특히 iOS Safari)에서는 동일한 코드가 전혀 반응하지 않는 현상이 발생합니다.
이 글에서는 그 원인과 함께,
HTML5 속성인 enterKeyHint를 이용해 문제를 깔끔하게 해결하는 방법을 정리합니다.
문제의 원인
1. 모바일 가상 키보드의 동작 차이
모바일 기기의 가상 키보드는 입력 필드의 type 속성이나 form 구조에 따라
“엔터(↵)” 키의 역할이 달라집니다.
예를 들어,
- iOS Safari에서는 <input type="text"> 에서 Enter를 눌러도 줄바꿈 처리만 되고 이벤트가 발생하지 않음
- Android에서는 브라우저에 따라 Enter가 onKeyDown 이벤트로 잡히기도, 아닐 수도 있음
즉, 모바일의 엔터키는 웹 브라우저가 알아서 “적당히” 처리하기 때문에
PC처럼 일관되게 이벤트를 받을 수 없습니다.
기존 해결 방법
엔터가 안 먹히면 가장 흔히 떠올리는 방법이 아래 두 가지입니다.
- 버튼을 따로 추가해서 클릭으로 등록 처리→ 모바일/PC 모두 확실하지만, UX가 약간 번거로움
- <button onClick={handleSubmit}>등록</button>
- onKeyDown 이벤트로 엔터 감지→ PC에서는 잘 작동하지만, 모바일에서는 동작하지 않는 경우 많음
- <input onKeyDown={(e) => e.key === "Enter" && handleSubmit()} />
이 두 방식은 완벽하지 않습니다.
모바일 사용자가 “완료” 키를 눌렀을 때 반응하지 않는다면 결국 UX는 떨어집니다.
enterKeyHint란?
enterKeyHint는 HTML5 표준 속성으로,
**모바일 가상 키보드에 “이 엔터키는 어떤 의미를 가진다”**고 알려주는 역할을 합니다.
<input type="text" enterKeyHint="done" />
브라우저는 이 속성을 읽고,
키보드의 “엔터” 버튼을 “완료”, “검색”, “보내기” 등으로 바꿔 표시하며
그에 맞게 동작하도록 도와줍니다.
enterKeyHint의 주요 옵션
값모바일 키보드 표시설명
| enter | ↵ | 기본 개행(엔터) |
| done | 완료 | 입력 완료, 저장용 |
| go | 이동 | 페이지 이동, 다음 단계 |
| next | 다음 | 다음 입력칸으로 이동 |
| search | 검색 | 검색 실행용 |
| send | 보내기 | 메시지, 폼 전송용 |
실제 적용 예시 (React)
<input
name="data2"
value={newItem.data2}
placeholder="값 입력"
enterKeyHint="done" // ✅ 모바일에서 '완료' 버튼으로 표시
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault(); // 기본 포커스 이동 막기
handleSubmit();
}
}}
/>
- iOS/Android 모두에서 엔터 이벤트가 정상적으로 인식
- “완료” 버튼으로 표시되어 UX도 명확
- PC에서는 전혀 영향 없음
PC 환경에서의 영향
enterKeyHint는 모바일 환경에서만 동작합니다.
데스크탑 브라우저(Chrome, Edge, Safari 등)에서는 무시되며,
렌더링이나 이벤트에 아무런 영향도 주지 않습니다.
즉,
enterKeyHint="done" 은 모바일만 위한 힌트일 뿐,
PC에서는 무시되므로 완전히 안전하게 사용할 수 있습니다.
실제 사례
아래는 동일한 입력 폼을 모바일과 데스크탑에서 테스트한 결과입니다.
환경Enter 키 표시동작
| iOS Safari | 완료 | onKeyDown 정상 작동 |
| Android Chrome | 완료 | onKeyDown 정상 작동 |
| PC Chrome | ↵ | 기존 Enter 이벤트 그대로 작동 |
정리
항목내용
| 속성명 | enterKeyHint |
| 지원 환경 | 모바일 (iOS, Android) |
| 데스크탑 영향 | 없음 |
| 추천값 | "done" 또는 "search" |
| 주요 효과 | 모바일 키보드의 “엔터키”를 완료 버튼처럼 동작시킴 |
| 사용 목적 | 엔터 이벤트 정상화 + UX 개선 |
결론
모바일에서 Enter 이벤트가 잡히지 않는 문제는
복잡한 자바스크립트 수정 없이 enterKeyHint="done" 한 줄로 해결할 수 있습니다.
✅ 코드 수정 거의 없음
✅ 모바일 UX 자연스럽게 개선
✅ PC와의 호환성 100% 유지
이제 “모바일에서 엔터가 안 먹는다”는 문제를 만나면,
버튼을 추가하기 전에 enterKeyHint부터 적용해보세요.
<input type="text" enterKeyHint="done" />
그 한 줄이 모든 걸 해결합니다.