<input type="time"> 요소에서 Enter 키를 눌렀을 때 브라우저의 기본 동작(폼 제출 등)이 실행되지 않도록 하려면 keydown 이벤트와 preventDefault() 메서드를 함께 사용해야 합니다.
핵심 원리는 간단합니다. 키보드 이벤트를 감지하여 눌린 키가 Enter인지 확인하고, 해당 경우에 event.preventDefault()를 호출해 기본 동작을 차단하는 것입니다. 아래는 전체 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="time" id="disableDefaultTime">
<script>
const pressEnter = (event) => {
if (event.key === "Enter") {
event.preventDefault();
}
};
document.getElementById("disableDefaultTime").addEventListener("keydown", pressEnter);
</script>
</body>
</html>
코드 설명
pressEnter함수는 발생한 이벤트 객체를 받아event.key값이"Enter"인지 검사합니다.- Enter 키가 감지되면
preventDefault()를 호출하여 폼 제출이나 커서 이동 같은 브라우저의 기본 동작을 막습니다. addEventListener("keydown", pressEnter)를 통해 대상 input 요소에 키다운 이벤트 리스너를 등록합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 뒤, 해당 파일에서 마우스 오른쪽 버튼을 클릭하고 VSCode 편집기의 Open with Live Server 옵션을 선택하면 됩니다. Live Server 확장 프로그램이 설치되어 있지 않다면, 저장된 HTML 파일을 브라우저에서 직접 열어도 동일하게 테스트할 수 있습니다.
실행 결과
아래는 실행 결과입니다. 시간 입력 필드에 포커스가 있는 상태에서 Enter 키를 눌러도 화면에 아무런 변화가 나타나지 않으며, 기본 동작이 정상적으로 비활성화됩니다.
반면, 아래 스크린샷과 같이 keydown 이벤트 처리를 활용하면 시간 값 자체는 문제없이 선택하고 입력할 수 있습니다. 즉, 이 방법은 시간 입력 기능에는 영향을 주지 않으면서 Enter 키에 의한 불필요한 기본 동작만 차단합니다.
