The Oninput Function in Javascript

The oninput function works on the text, selects, and inputs data by user tag on the html input tag. When you can input data, the function changes the functionality as per requirement using javascript. When input completes the inserting data or stops focusing on the input tag, JavaScript stops the functionality.

Javascript and html support the oninput functionality for the input, select, and textarea tag. This functionality depends on the user interface. We can add validations and user restrictions for better application operation. We can use it for text, passwords, and other user information.

Ways to Use the Function

There are three ways to use the Oninput function in javascript. We can use the function in three ways: only javascript, html with javascript, and javascript with addEventListener.

Oninput function in javascript
Oninput function in html with javascript
Oninput function in javascript with addEventListener

Oninput function in javascript

The function uses a selector with the oninput function directly in the javascript. The event validation uses in the function name using javascript.

Syntax

The following syntax uses in the web page to operate the oninput function.

<script>
document.getElementById("id_name ").oninput = function() {Function_name()};
</script>

Examples

The following examples show the operation and working procedure of the Oninput function in javascript.

Example 1:

In the example, we can use the html tag with the oninput event and function in the script tag. Here, the function uses to add validation for the interactive user field.

<!DOCTYPE html>
<html>
<head>
<title> The Oninput function in javascript  </title>
<style>
h3{
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h3> The Oninput function in javascript </h3>
<p> Here, we can use the Oninput function through the javascript tag on the web page. </p>
<input type = "text" id = "input_class" placeholder = "write here.">
<p id = "first_class"> </p>
<script>
// selecting the html element
let q_select = document.getElementById("input_class");
q_select.oninput = function() {Function_show()};
function Function_show() {
let p_select = document.getElementById("first_class");
p_select.innerHTML = "The value of the html input field is inserted successfully.";
}
</script>
</body>
</html>

Output

The following image shows the oninput functions output information.

Example 2:

In the example, we can use the html tag with the oninput event and function in the script tag. Here, the function uses to add validation for the textarea input field.

<!DOCTYPE html>
<html>
<head>
<title> The Oninput function in javascript  </title>
<style>
h3{
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h3> The Oninput function in javascript </h3>
<p> 
Here we can use the Oninput function through the javascript tag on the web page.
<br>
we can use the textarea input tag.
</p>
<textarea id = "input_class" placeholder = "write here."> </textarea>
<p id = "first_class"> </p>
<script>
// selecting the html element
let q_select = document.getElementById("input_class");
q_select.oninput = function() {Function_show()};
function Function_show() {
let p_select = document.getElementById("first_class");
p_select.innerHTML = "The textarea of the web page is inserted data successfully.";
p_select.style.color = "blue";
}
</script>
</body>
</html>

Output

The following image shows the oninput functions output information.

Example 3:

In the example, we can use the oninput event and function in the script tag. The function works when we select the data using the dropdown field.

<!DOCTYPE html>
<html>
<head>
<title> The Oninput function in javascript  </title>
<style>
h3{
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h3> The Oninput function in javascript </h3>
<p> 
Here we can use the Oninput function through the javascript tag on the web page.
<br>
we can use the Select input tag for the dropdown function.
</p>
<label> Choose Your Country: </label>  
    <select id = "input_class">
    	<option> select one </option> 
        <option> India </option>  
        <option> Japan </option>  
        <option> USA </option>  
        <option> South Koria </option>  
        <option> Germany </option>  
        <option> Peru </option>        
  </select>  
<p id = "first_class"> </p>
<script>
//Selecting the html element
let q_select = document.getElementById("input_class");
q_select.oninput = function() {Function_show()};
function Function_show() {
let p_select = document.getElementById("first_class");
p_select.innerHTML = "The dropdown of the web page is inserted data successfully.";
p_select.style.color = "blue";
}
</script>
</body>
</html>

Output

The following image shows the oninput functions output information.

Oninput function in html with javascript

The event uses the HTML input tag, such as input, select, and textarea. The function uses in the script tag or js page with the validation.

Syntax

The syntax uses the oninput function directly in the html tag with the function name.

<input type = "text" oninput = "Function_name()">
<script>
Function_name(){
// Write code here.
};
</script> 

Examples

The following examples show the operation and working procedure of the Oninput function in html with javascript.

Example 1:

In the example, we can use the oninput in html tag and the function used in the script tag. Here, the function uses to add validation for the interactive user fields.

<!DOCTYPE html>
<html>
<head>
<title> The Oninput function in javascript  </title>
<style>
h3{
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h3> The Oninput function in javascript </h3>
<p> Here,  we can use the Oninput function in html with javascript on the web page. </p>
<input type = "text" placeholder = "write here." oninput = "Function_show()">
<p id = "first_class"> </p>
<script>
function Function_show() {
//Selecting the element
let p_select = document.getElementById("first_class");
p_select.innerHTML = "The value of the html input field is inserted successfully.";
}
</script>
</body>
</html>

Output

The following image shows the oninput functions output information

Example 2:

In the example, we can use the oninput in the input html tag and the function used in the script tag. Here, the function uses to add validation for the password type of the interactive user field.

<!DOCTYPE html>
<html>
<head>
<title> The Oninput function in javascript  </title>
<style>
h3{
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h3> The Oninput function in javascript </h3>
<p> Here, we can use the Oninput function in html with javascript on the web page. 
<br>
we can use the Select input tag for the password type user data.
</p>
<input type = "password" id = "pass_class" placeholder = "write here." oninput = "Function_show()">
<p id = "first_class"> </p>
<script>
function Function_show() {
var q_select = document.getElementById("pass_class").value;
if(q_select.length > 10) {
 let p_select = document.getElementById("first_class");
p_select.innerHTML = "The value of the html input field is greater than limits.";
p_select.style.color = "blue";
}else{
// selecting the element
let p_select = document.getElementById("first_class");
p_select.innerHTML = "The value of the html input field is inserted successfully.";
p_select.style.color = "blue";
}
}
</script>
</body>
</html>

Output

The following image shows the oninput functions output information

Example3:

The javascript function uses for the input range in this example. The oninput event works when the range selects in the html tag.

<!DOCTYPE html>
<html>
<head>
<title> The Oninput function in javascript  </title>
<style>
h3{
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h3> The Oninput function in javascript </h3>
<p> Here, we can use the Oninput function in html with javascript on the web page. 
<br>
we can use the Select input tag for the range type user data.
</p>
<input type = "range" id = "pass_class" placeholder = "write here." oninput = "Function_show(this.value)">
<p id = "first_class"> </p>
<p id = "sec_class"> </p>
<script>
function Function_show(value) {
// selecting the element
let p_select = document.getElementById("first_class");
p_select.innerHTML = "The value of the html input field is inserted successfully.";
p_select.style.color = "blue";
var q_select = document.getElementById("sec_class");
q_select.innerHTML = "The value is " +value;
q_select.style.color = "red";
}
</script>
</body>
</html>

Output

The following image shows the oninput functions output information

Oninput function in javascript with addEventListener

The function used in the addEventListener() method with the selector. The "input" keyword is necessary to operate the oninput function with the javascript function name.

Syntax

The following syntax shows an oninput event with the addEventListener () method.

<script>
document.getElementById("id_name ").addEventListener("input", Function_name);
</script>

Examples

The following examples show the operation and working procedure of the Oninput function in javascript with addEventListener.

Example 1:

In the example, we can use the html tag with the oninput event and function in the script tag. Here, the function uses to add validation for the interactive user field. The add event listener method with input keyword is essential for the event in the script tag.

<!DOCTYPE html>
<html>
<head>
<title> The Oninput function in javascript  </title>
<style>
h3{
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h3> The Oninput function in javascript </h3>
<p> Here, we can use the Oninput function through the javascript tag with the addEventListener() method on the web page. </p>
<input type = "text" id = "input_class" placeholder = "write here.">
<p id = "first_class"> </p>
<script>
// selecting the html element
let q_select = document.getElementById("input_class");
q_select.addEventListener("input", Function_show);
function Function_show() {
let p_select = document.getElementById("first_class");
p_select.innerHTML = "The value of the html input field is inserted successfully.";
}
</script>
</body>
</html>

Output

The following image shows the oninput functions output information

Example 2:

In the example, we can use the html tag with the oninput event and function in the script tag. Here, the function uses to add validation for the interactive user fields. The add event listener method with input keyword is essential for the event in the script tag.

<!DOCTYPE html>
<html>
<head>
<title> The Oninput function in javascript  </title>
<style>
h3{
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h3> The Oninput function in javascript </h3>
<p> Here, we can use the Oninput function through the javascript tag with the addEventListener() method on the web page.
<br>
We can use the date ticket with the input field.
</p>
<input type = "date" id = "input_class" placeholder = "write here.">
<p id = "first_class"> </p>
<script>
// selecting the html element
let q_select = document.getElementById("input_class");
q_select.addEventListener("input", Function_show);
function Function_show() {
let p_select = document.getElementById("first_class");
p_select.innerHTML = "The date of the input field is inserted successfully.";
p_select.style.color = "red";
}
</script>
</body>
</html>

Output

The following image shows the oninput functions output information