<div class="wrap">
  <label for="example1" class="ex1-label">예시 1 :  input에 입력해보세요</label>
  <input type="text" id="example1" class="ex1-input">
  <p class="ex1-p"></p>
</div>

<div class="wrap">
  <label for="example2" class="ex2-label">예시 2 :  input에 엔터를 눌러보세요!</label>
  <input type="text" id="example2" class="ex2-input">
  <p class="ex2-p"></p>
</div>


* {
  margin: 0;
  box-sizing: border-box;
}

@font-face {
    font-family: 'SpoqaHanSansNeo-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body,
input {
  font-family: 'SpoqaHanSansNeo-Regular';
}

.wrap {margin: 20px;}

.ex1-label,
.ex2-label{
  display: block
}

.ex1-input,
.ex2-input{
  margin: 20px 0;
}

.ex1-p,
.ex2-p{
  width: 500px;
  height: 200px;
  padding: 20px;
  background-color: yellowgreen;
}

.ex2-p {
  background-color: lightyellow;
}
//예시 1번 : beforeinput 사용 시
inputOne = document.querySelector('.ex1-input');
paraOne = document.querySelector('.ex1-p');

inputOne.addEventListener('beforeinput',e=>{
  paraOne.textContent = e.target.value;
})


//예시 2번 : keydown 사용 시
inputTwo = document.querySelector('.ex2-input');
paraTwo = document.querySelector('.ex2-p');

inputTwo.addEventListener('keydown',e=>{
  if(e.key === 'Enter') {
    paraTwo.textContent += 'Enter를 눌렀네요 😋'
  }
})
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.