revision:
The oninput attribute fires when the value of an <<input> or <textarea> element is changed.
The "oninput attribute" is part of the event attributes, and can be used on any HTML element.
This event is similar to the "onchange event". The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on <select> element.
<element oninput="script"></element>
value: this attribute contains a script and it works when the oninput event is triggered.
example
Write something in the text field to trigger a function.
codes:
<p class="spec" >Write something in the text field to trigger a function.</p>
<input style="margin-left:3vw;" type="text" id="myInput" oninput="myInput()">
<p class="spec" id="demo-A"></p>
<script>
function myInput() {
var x = document.getElementById("myInput").value;
document.getElementById("demo-A").innerHTML = "You wrote: " + x;
}
</script>
example
Enter some text here:
codes:
<p class="spec">Enter some text here: <input type="text" id="demo-1" oninput="addMe()"></p>
<p class="spec" id="sudo"></p>
<script>
function addMe() {
var x = document.getElementById("demo-1").value;
document.getElementById("sudo").innerHTML = "Entered Text: " + x;
}
</script>
The oninvalid event occurs when a submittable <input> element is invalid.
Supported HTML tags: <input>
<element oninvalid="script"></element>
script: the script to be run on oninvalid.
example
If you click submit, without filling out the text field, an alert message will occur.
codes:
<form style="margin-left:3vw;" action="/action_page.php" method="get">
<p class="spec"> Name: <input type="text" oninvalid="alert('You must fill out the form!');"
name="fname" required></p>
<input style="margin-left:3vw;" type="submit" value="Submit">
</form>
<p class="spec">If you click submit, without filling out the text field, an alert message will occur.</p>
example
If you submit the input field with less than 6 characters, an alert message will occur.
codes:
<form style="margin-left:3vw;" action="/action_page.php" method="get">
<p class="spec">Name: <input type="text" oninvalid="alert('Must contain 6 or more characters');"
name="fname" pattern=".{6,}"></p>
<input class="spec" type="submit" value="Submit">
</form>
<p class="spec">If you submit the input field with less than 6 characters, an alert message will occur.</p>