<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.