Which event occurs when a value is added to an input box in JavaScript? - GeeksforGeeks

11 Feb, 2022
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 in an input box in 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 presse 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 listing to this event.
Example 1: Below is an example that shows the usage of these events.
HTML
<!DOCTYPE html><html> <head>    <title>GFG events</title></head> <body id="GFG">    <form>        <label>Type Something</label>        <input type="text"                onChange=invokingOnChangeEvent()            oninput=invokingOnInputEvent()            onkeydown=invokingOnKeyDownEvent()            onkeyup=invokingOnKeyUpEvent()            onkeypress=invokingOnKeyPressEvent()>        </input>    </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> </html>
Output:
Example 2: This example will change the background color on an event occurring
HTML
<!DOCTYPE html><html> <head>    <title>GFG events</title></head> <body id="GFG">    <form>        <label> Type Something</label>        <input type="text"            onChange=invokingOnChangeEvent()            oninput=invokingOnInputEvent()            onkeydown=invokingOnKeyDownEvent()            onkeyup=invokingOnKeyUpEvent()            onkeypress=invokingOnKeyPressEvent()>        </input>    </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> </html>
Output:
germanshephered48
JavaScript-Events
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
How to create a link in JavaScript ?
How to Show Images on Click using HTML ?
How to remove an HTML element using JavaScript ?
Remove elements from a JavaScript Array
Express.js express.Router() Function
Installation of Node.js on Linux
How to set input type date in dd-mm-yyyy format using HTML ?
How to create footer to stay at the bottom of a Web page?
How to float three div side by side using CSS?