목표
입력된 값을 console에 뽑아 보기
html 파일
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이벤트 핸들링</title>
</head>
<body>
<div class="container">
<h1 class="title">이벤트 헨들링</h1>
<form id="form">
<div class="form-container">
<label for="drink-name" class="input-label"></label>
<input
type="text"
id="menu-name"
name="menuName"
class="menu-input"
placeholder="메뉴 이름"
/>
</div>
</form>
</div>
<script src="index.js"></script>
</body>
</html>
html 결과
JavaScript 파일
// input 창에 입력된 값 읽어와 주게 설정을 해주었다.
function App() {
document.querySelector('#menu-name').addEventListener('keypress', (e) => {
console.log(e.key);
});
}
// document.querySelector('') -> html에 있는 element를 찾을 수 있다.
// addEventListener('', (e)=>{}) -> 찾은 element에서 이벤트를 받아 올 수 있다.
입력창에 입력을 해도 console에 나타나지 않는다. 그 이유는 function App을 선언만하고 실행을 하지 않았기 때문이다.
function App() {
document.querySelector('#menu-name').addEventListener('keypress', (e) => {
console.log(e.key);
});
}
App(); //function App() 실행
JavaScript 결과
이제 입력 창에 입력을 하면 console 창에 결과 값이 나온다. 하지만 한 번에 한문자씩 받아온다.
나는 입력한 값 전체를 한 번에 받아 오고 싶다. 그러기 위해서 입력된 값이 "enter"키 일 때 입력 값을 들고 오게 설정을 해줘야 한다.
입력한 값을 들고 오기 위해 value를 사용한다.
function App() {
document.querySelector('#menu-name').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
console.log(document.querySelector('#menu-name').value);
}
});
}
App();
이제 입력 창에 입력을 하고 Enter을 누르면 console 창에 하나로 나타난다. 하지만 enter을 치면 화면이 새로 고침이 되고 있다.
그 이유는 form 태그 때문이다. form 태그는 기본적으로 웹 서버에 무언가를 전송하기 위한 태그이다.
그래서 enter키를 누르게 되면 자동으로 전송하는 동작을 브라우저에서 제공해서 enter을 누르게 되면 화면이 새로 고침이 된다.
그래서 enter키를 눌렀을 때 새로고침을 막기 위해서 form태그가 자동으로 전송되는 걸 막아 줘야 한다.
form에 있는 id 값을 들고 와 막아 줬다. preventDefault() 메서드를 이용하면 enter키를 눌러도 자동으로 전송이 되지 않는다.
function App() {
// from 태그가 자동으로 전송되는걸 막아준다.
document.querySelector('#form').addEventListener("submit", (e) => {
e.preventDefault();
})
// 메뉴를 입력 받는다.
document.querySelector('#menu-name').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
console.log(document.querySelector('#menu-name').value);
}
});
}
App();
//preventDefault() -> enter키를 눌러도 자동으로 전송이 되지 않는다.
최종 결과
'프론트엔드 > JavaScript' 카테고리의 다른 글
| [자바스크립트] querySelector() 와 getElementById()의 차이점 (0) | 2022.03.22 |
|---|---|
| [자바스크립트] 자료형 (0) | 2022.03.15 |
| [자바스크립트 ] append, prepend, after, before (0) | 2022.03.13 |
| [자바스크립트] async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기 (0) | 2022.03.08 |
| [자바스크립트] 기본 강화_변수 [1] (0) | 2022.03.01 |
댓글