JavaScript oninput Event function


How to write and call the oninput function in JavaScript?

We can call oninput function on text input HTML tags like <input/> , <textarea/> that are written between the body tag of HTML page. • Now we are going to use an input HTML field with id='myinput' . • On input the data we will call " myinputfunction() " .

<input oninput="myinputfunction()" id="myinput"/>

How to get the value of input field on input , and display in paragraph tag?

In myinputfunction() we want to take the changing input from input field and want to display into the HTML paragraph tag with id=' myparagraph ' . First we will take the input from input field using getElementById function then we will pass this value to the paragraph . • getElementById Full Guide Tutorial

<script type="text/javascript"> function myinputfunction() { var inputvalue = document.getElementById("myinput").value; //Getting value from <input> document.getElementById("myparagraph").innerHTML=inputvalue; //Assigning inputvalue to <p> } </script>

Output of below Full Source Code of calling Javascript oninput function

SourceCode:<input oninput="myinputfunction()" placeholder="Enter input . . ." id="myinput"/> <p id="myparagraph"></p> <script type="text/javascript"> function myinputfunction() { var inputvalue = document.getElementById("myinput").value; //Getting value from <input> document.getElementById("myparagraph").innerHTML=inputvalue; //Assigning inputvalue to <p> } </script>
Chapter Next »