JavaScript addEventListener("keyup")

텍스트 바에 입력한 텍스트를 그대로 콘솔 로그에 출력

HTML

    <input class="textBar" type="text" />

 

JavaScript

const textBar = document.querySelector(".textBar");

textBar.addEventListener("keyup", function () {

  console.log(textBar.value);

});

 

ON BROWSER

 

 

 

 

 

텍스트바에 Ctrl + Enter 키가 입력되면 경고창 띄우기

(1) Enter키의 keyCode 찾기

JavaScript

const textBar = document.querySelector(".textBar");

textBar.addEventListener("keyup", function (e) {

  console.log(e);

});

 

ON BROWSER

 

 

 

(2) 찾은 keyCode로 조건 설정하기

JavaScript

const textBar = document.querySelector(".textBar");

textBar.addEventListener("keyup", function (e) {

  if (e.keyCode === 13) {

    alert("Enter키를 누르셨습니다.");

  }

});

 

ON BROWSER

Enter키를 누르면 곧바로 경고창이 뜸

 

 

 

(3) Ctrl + Enter키를 누르면 경고창이 뜨도록 수정

JavaScript

const textBar = document.querySelector(".textBar");

textBar.addEventListener("keyup", function (e) {

  if (e.keyCode === 13 && e.ctrlKey) {

    alert("Ctrl + Enter키를 누르셨습니다.");

  }

});

 

ON BROWSER