<form method="post" action="">
    <p>「input イベント」<br>入力するたびにイベントが発生します。</p>
    <input type="text" name="test1" oninput="inputChange01()">
    <input type="text" name="test2">
    <p class="input_output"></p>
</form>

<form method="post" action="">
    <p>「change イベント」<br>入力してEnterを押すとイベントが発生します。</p>
    <input type="text" name="test3"  onchange="inputChange02()">
    <input type="text" name="test4">
    <p class="change_output"></p>
</form>

body{
  display:flex;
  flex-flow:column nowrap;
  align-items:center;
}

form{
  width:150px;
  font-size:12px;
}

input,p{
  width:100%;
  margin:5px 0 0 0;
}

input[name="test2"],input[name="test4"]{
  display:none;
}

.input_output,.change_output {
  color:#ff0000;
}

let input_output = document.querySelector(".input_output")
let inputChange01 = () => {
    input_output.textContent = " "
    input_output.textContent = "入力されました!"
    return false;
}

let change_output = document.querySelector(".change_output")
let inputChange02 = () => {
    change_output.textContent = " "
    change_output.textContent = "入力されました!"
    return false;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.