JavaScript has events to provide a dynamic interface to a webpage. These events are hooked to elements in the Document Object Model (DOM). These events by default use bubbling propagation i.e, upwards in the DOM from children to parent. We can bind events either as inline or in an external script. There are multiple events associated with Javascript which include onClick(), onChange(), onmouseleave(), onmouseout(), onmouseover(), onload() etc.
In this article, we will specifically learn about the event that occurs when a value is added to an input box in JavaScript.
JavaScript oninput() event: The oninput() event occurs when a value is added to an input box. We enter a value using the keyboard. So we can associate certain keyboard events when a value is added in an input box using the keyboard.
These events may include:
- onkeypress: When the user presses a key that produces a character value.
- onkeyup: Whenever a key is released after pressing.
- onkeydown: When the user has pressed down the key. It will occur even if the key pressed does not produce a character value.
We can also associate onChange events when a value is added in an input box using the keyboard.
- onChange: This event detects the change in the value of any element listed in this event.
Example 1: Below is an example that shows the usage of these events.
<body id="GFG">
<form>
<label>Type Something</label>
<input type="text" onChange=invokingOnChangeEvent()
oninput=invokingOnInputEvent()
onkeydown=invokingOnKeyDownEvent()
onkeyup=invokingOnKeyUpEvent()
onkeypress=invokingOnKeyPressEvent()>
</form>
<script>
function invokingOnInputEvent(event) {
console.log("onInput event occurred")
}
function invokingOnChangeEvent(event) {
console.log("onChange event occurred")
}
function invokingOnKeyPressEvent(event) {
console.log("onKeyPress event occurred")
}
function invokingOnKeyUpEvent(event) {
console.log("onKeyUp event occurred")
}
function invokingOnKeyDownEvent(event) {
console.log("onKeyDown event occurred")
}
</script>
</body>
|
Output:
Example 2: This example will change the background color on an event occurring
<body id="GFG">
<form>
<label> Type Something</label>
<input type="text"
onChange=invokingOnChangeEvent()
oninput=invokingOnInputEvent()
onkeydown=invokingOnKeyDownEvent()
onkeyup=invokingOnKeyUpEvent()
onkeypress=invokingOnKeyPressEvent()>
</form>
<script>
function invokingOnInputEvent(event) {
console.log("onInput event occurred")
document.getElementById("GFG")
.style.backgroundColor = 'red';
}
function invokingOnChangeEvent(event) {
console.log("onChange event occurred")
document.getElementById("GFG")
.style.backgroundColor = 'green';
}
function invokingOnKeyPressEvent(event) {
console.log("onKeyPress event occurred")
document.getElementById("GFG")
.style.backgroundColor = 'yellow';
}
function invokingOnKeyUpEvent(event) {
console.log("onKeyUp event occurred")
document.getElementById("GFG")
.style.backgroundColor = 'pink';
}
function invokingOnKeyDownEvent(event) {
console.log("onKeyDown event occurred")
document.getElementById("GFG")
.style.backgroundColor = 'orange';
}
</script>
</body>
|
Output: