Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!