JavaScript - 엔터 키 처리 (keyup 이벤트)

페이지에서 입력폼에 엔터 키를 눌러 저장, 검색 등 각종 이벤트 처리를 하는데, 

JavaScript에서 Enter Key 이벤트 처리방법에 대해서 알아보자.

 

---

1. keyup 이벤트 엔터키 감지 (전역)

 

document.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        console.log("Enter key released!");
    }
});

 

- 사용자가 Enter 키를 눌렀다가 뗄 때 (keyup) 이벤트가 실행

- event.key === "Enter" 조건을 사용하여 엔터 키를 감지

 

---

 

 2. 특정 입력 필드에서 엔터 키 감지 (input 또는 textarea)

 

document.getElementById("inputField").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        console.log("Enter key released in input field!");
        searchFunction(); // 원하는 동작 실행
    }
});

function searchFunction() {
    alert("검색 기능 실행!");
}

- 특정 <input> 요소에서만 엔터 키 입력을 감지할 경우 해당 id에 이벤트 리스너를 추가

---

3. keyup을 이용한 폼 제출 처리

 

document.getElementById("myForm").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        event.preventDefault(); // 기본 폼 제출 방지
        console.log("Form submitted via Enter key!");
    }
});

- 폼이 엔터 키 입력 시 자동으로 제출되지 않도록 event.preventDefault()를 사용

 

 

---

4. keyup을 사용하여 textarea에서 줄 바꿈 방지 (Shift + Enter허용)

 

document.getElementById("myTextarea").addEventListener("keyup", function(event) {
    if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();
        console.log("Enter pressed, but no new line added.");
    }
});

- Shift + Enter는 줄 바꿈을 허용하지만, 단순히 Enter 키만 입력하면 기본 동작을 방지

 

---

정리

 

 

keyup은 키가 떼어질 때 감지하므로, keydown보다 연속 입력을 방지할 때 유용하다.

event.key === "Enter"을 사용하여 엔터 키를 감지하는 것이 최신 브라우저에서 가장 안정적이고, 

특정 요소에서만 적용하려면 document가 아닌 특정 id 또는 class에 이벤트 리스너를 추가하는 것이 좋다.

 

 

끝.