728x90
반응형
참고: https://codesource.io/how-to-trigger-enter-key-in-javascript/
이 튜토리얼에서는 javascript에서 어떻게 엔터키를 입력 받을지 알아보겠습니다.
form에서 input 값을 전송할 때 일반적으로 전송 버튼을 클릭해서 전송을 했습니다. 그런데 가끔은 키보드의 엔터키를 누름 으로서 form input을 전송하는 기능이 필요할 때가 있습니다. 이를 javascript로 구현하는건 쉽습니다. 다음 예제는 이러한 기능을 구현한 예제입니다.
<html>
<head>
<title>Trigger enter key in Javascript</title>
</head>
<body>
<h3>Press Enter for Trigger the Button</h3>
<p>Press the "Enter" key to trigger the button.</p>
<input id="myInput" value="Greetings..">
<button id="myBtn" onclick="alert('Wecome! You Successfully triggered Enter key')">Button</button>
</body>
</html>여기서는 단순하게 input 필드와 버튼을 넣었습니다. 또 사용자를 위한 간단한 설명도 들어있습니다. 하지만 아직은 엔터키로 입력하는 기능을 구현하지 않았기 때문에 엔터를 입력해도 결과가 나타나지는 않습니다. 이는 다음의 코드를 추가해서 구현해 보겠습니다.
<script>
var input = document.getElementById("myInput");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
</script>위는 엔터키를 눌렀을 때 작동하는 코드이고 기존의 버튼을 클릭하는 기능역시 동작합니다. 여기서 13은 엔터키의 키보드 번호입니다. 코드를 단순화 하기 위해 HTML에 바로 작성 했지만 javascript 부분은 분리된 파일로 저장하는 것도 가능합니다.
작성한 코드 테스트를 위해 엔터키를 누르면 위의 스크린샷 처럼 바로 alert 메시지가 나타납니다. 이 메시지는 HTML 코드에서 작성한 것이고 엔터키 관련 동작은 javascript에서 작성된 것입니다.
전체 코드:
728x90
<html>
<head>
<title>Trigger enter key in Javascript</title>
</head>
<body>
<h3>Press Enter for Trigger the Button</h3>
<p>Press the "Enter" key to trigger the button.</p>
<input id="myInput" value="Greetings..">
<button id="myBtn" onclick="alert('Wecome! You Successfully triggered Enter key')">Button</button>
<script>
var input = document.getElementById("myInput");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
</script>
</body>
</html>관련 글:
반응형
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 fetch api 사용 방법 (0) | 2022.05.04 |
|---|---|
| [javascript] 자바스크립트 문자열에 0으로 자리수 채우는 방법 (padding) (0) | 2022.05.03 |
| [javascript] 자바스크립트 querySelector 사용 방법 (0) | 2022.04.29 |
| [javascript] 자바스크립트 array 사용 방법 (1) | 2022.04.27 |
| [javascript] 자바스크립트 classList 사용 방법 (1) | 2022.04.27 |
댓글