Enter 키의 키 코드(keyCode)는 13입니다. 자바스크립트에서는 event.keyCode 값을 확인하여 사용자가 Enter 키를 눌렀는지 판별할 수 있습니다. 아래는 텍스트 상자에서 Enter 키를 누르면 지정한 함수가 실행되도록 구현한 예제입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input type="text" id="name"/>
<script>
document.getElementById("name").addEventListener("keydown",
function(event) {
if (!event) {
var event = window.event;
}
event.preventDefault();
if (event.keyCode == 13){
login();
}
}, false);
function login(){
console.log("submitted successfully....");
}
</script>
</body>
</html>
코드 설명
- addEventListener('keydown', ...): 텍스트 상자에 키보드 입력 이벤트 리스너를 등록합니다.
- event.preventDefault(): Enter 키 입력 시 발생하는 기본 동작(폼 제출 등)을 막아 원하는 방식으로 처리할 수 있게 합니다.
- event.keyCode == 13: 눌린 키의 코드가 13, 즉 Enter 키인지 확인합니다.
- login() 함수: Enter 키가 감지되면 호출되며, 여기서는 콘솔에 성공 메시지를 출력합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 'anyName.html'(또는 index.html)로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 됩니다.
실행 결과
프로그램을 실행하면 다음과 같은 화면이 나타납니다.
텍스트 상자에 내용을 입력한 후 Enter 키를 누르면, 아래 스크린샷과 같이 콘솔에 다음 메시지가 출력됩니다.
참고: 최신 방식
keyCode는 현재 폐기(deprecated)된 속성이므로, 최신 브라우저 환경에서는 event.key === 'Enter' 조건을 사용하는 것이 더 안전하고 권장됩니다. 기존 코드와의 호환성이 필요한 경우에만 keyCode 방식을 유지하는 것이 좋습니다.