How To Use Oninput Event In JavaScript With Example

Posted By Bajarangi soft , Posted On 28-09-2020

In Java Script there is event on input it can use for change input text or text area.so today we are going to discuss about oninput event in java script

How To Use Oninput Event In JavaScript With Example

The oninput event occurs when an element gets user input.

This event occurs when the value of an <input> or <textarea> element is changed.

Tip: 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, after the content has been changed. The other difference is that the onchange event also works on <select> elements.

Example(1)

<p>Write something in the text field to trigger a function.</p>

<input class="form-control" type="text" id="myInput" oninput="uppercase()">

<h2 id="demo"></h2>
<script>
    function uppercase() {
        var x = document.getElementById("myInput").value;

        k = x.toUpperCase();
        document.getElementById("demo").innerHTML = "You wrote: " + k;
    }
</script>

In above example when you enter something it will automatically display on specified html tag.

Example(2)

Enter name: <input type="text" value="Mickey" oninput="get_alert()">

<script>
    function get_alert() {
        alert("The value of the input field was changed.");
    }
</script>

In above example demonstrates how to assign an "oninput" event to an input element.

Example(3)

Enter name: <input type="text" id="Input" value="shiva">

<script>
    document.getElementById("Input").oninput = function() {input_change()};

    function input_change() {
        alert("The value of the input field was changed.");
    }
</script>

In above example uses the HTML DOM to assign an "oninput" event to an input element.

Example(4)

Enter name: <input type="text" id="Input" value="Mickey">

<script>
    document.getElementById("Input").addEventListener("input", input_change);

    function input_change() {
        alert("The value of the input field was changed.");
    }
</script>

In above example uses the addEventListener() method to attach an "input" event to an input element.

Example(5)

<input type="range" oninput="textchange(this.value)">
<h2 id="demo"></h2>

<script>
    function textchange(val) {
        document.getElementById("demo").innerHTML = val;
    }
</script>

In above example demonstrates how to dynamically update a slider value with oninput.

Complete code for Oninput Event In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Use Oninput Event In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1{
        color: red;
    }
</style>
<body>
<div class="container">
    <br>
       <div class="text-center">
        <h1>Use Oninput Event In JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <p>Write something in the text field to trigger a function.</p>

        <input class="form-control" type="text" id="myInput" oninput="uppercase()">

        <h2 id="demo"></h2>

    </div>
</body>
</html>
<p>Write something in the text field to trigger a function.</p>

<input class="form-control" type="text" id="myInput" oninput="uppercase()">

<h2 id="demo"></h2>
<script>
    function uppercase() {
        var x = document.getElementById("myInput").value;

        k = x.toUpperCase();
        document.getElementById("demo").innerHTML = "You wrote: " + k;
    }
</script>

Related Post