<form method="post" action="">
    <input type="text" name="test1" oninput="inputChange(event)">
    <input type="text" name="test2">
    <p id="text_val">テキストエリアに入力されたテキスト ⇒ <span></span></p>
    <p id="input_val">今、入力されたテキスト ⇒ <span></span></p>
</form>

<form method="post" action="">
    <input type="text" name="test3">
    <input type="text" name="test4">
    <p id="text_val2">テキストエリアに入力されたテキスト ⇒ <span></span></p>
    <p id="input_val2">今、入力されたテキスト ⇒ <span></span></p>
</form>

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

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

input,p{
  width:100%;
}

input[name="test2"],input[name="test4"]{
  display:none;
}
let text_val = document.querySelector("#text_val > span");
let input_val = document.querySelector("#input_val > span")

let inputChange = (e) => {
    text_val.textContent = e.currentTarget.value;
    input_val.textContent = e.data;
}

let input = document.querySelector("input[name='test3']");
let text_val2 = document.querySelector("#text_val2 > span");
let input_val2 = document.querySelector("#input_val2 > span");

let inputChange2 = (e) => {
    console.log(e.data);
    text_val2.textContent = e.currentTarget.value;
    input_val2.textContent = e.data;
}
input.addEventListener('input', inputChange2);


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.