The oninput event handler operates on text inputs, selections, and user-entered data associated with the HTML input element. This function adapts its behavior according to specific needs using JavaScript whenever data is entered. Once the user finishes entering data or shifts focus away from the input element, JavaScript ceases its operations related to that input.
JavaScript and HTML provide support for the oninput event for elements such as input, select, and textarea tags. This feature is contingent upon the user interface's behavior. Implementing validations and user restrictions can enhance the functionality of the application. This capability can be utilized for various types of input, including text fields, password entries, and other forms of user data.
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 employs a selector that integrates the oninput event directly within the JavaScript code. The validation of the event is carried out using the function name in the JavaScript context.
Syntax
The syntax provided below is utilized within the web page to execute the oninput function.
<script>
document.getElementById("id_name ").oninput = function() {Function_name()};
</script>
Examples
The subsequent examples illustrate the functionality and operational process of the Oninput method in JavaScript.
Example 1:
In this illustration, we can utilize the HTML tag in conjunction with the oninput event and the function defined within the script tag. In this context, the function is employed to implement validation for the interactive user 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. </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 image below illustrates the output information produced by the oninput functions.
Example 2:
In the demonstration, we can implement the HTML tag alongside the oninput event and the function defined within the script tag. In this case, the function serves to incorporate validation for the input provided in the textarea 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 image below illustrates the output information generated by the oninput functions.
Example 3:
In this illustration, we can utilize the oninput event along with a corresponding function specified within the script tag. This function is activated whenever we make a selection from the dropdown menu.
<!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 image below illustrates the output information generated by the oninput functions.
Oninput function in html with javascript
The event utilizes HTML input elements, which include input, select, and textarea tags. The function is implemented within the script tag or a JavaScript file, incorporating validation procedures.
Syntax
The syntax incorporates the oninput function directly within the HTML element using the name of the function.
<input type = "text" oninput = "Function_name()">
<script>
Function_name(){
// Write code here.
};
</script>
Examples
The subsequent examples illustrate the functionality and operational process of the Oninput function in HTML using JavaScript.
Example 1:
In this illustration, we can utilize the oninput attribute within the HTML tag along with the function defined in the script tag. This function is employed to implement validation for the user-interactive 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 image below illustrates the output information generated by the oninput functions.
Example 2:
In this illustration, we can implement the oninput attribute within the input HTML element alongside the function defined in the script tag. In this context, the function is utilized to incorporate validation for the password category of the interactive user 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 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 image below illustrates the output information generated by the oninput functions.
Example3:
In this instance, the JavaScript function operates with the input range. The oninput event is triggered when the range is adjusted within the HTML element.
<!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 image below illustrates the output information generated by the oninput functions.
Oninput function in javascript with addEventListener
The function specified within the addEventListener method alongside the selector is crucial. The term "input" is essential for the execution of the oninput function in conjunction with the designated JavaScript function name.
Syntax
The syntax provided demonstrates the utilization of the addEventListener method to implement an oninput event.
<script>
document.getElementById("id_name ").addEventListener("input", Function_name);
</script>
Examples
The examples presented below illustrate the functionality and operational process of the Oninput function in JavaScript when utilized in conjunction with addEventListener.
Example 1:
In this illustration, we can implement the HTML element alongside the oninput event and the corresponding function within the script tag. In this context, the function is utilized to incorporate validation for the user-interactive field. The add event listener method, employing the input keyword, is crucial for the event within 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 image displayed below illustrates the output information generated by the oninput functions.
Example 2:
In this instance, we can utilize the HTML tag alongside the oninput event and a function defined within the script tag. This function is designed to implement validation for user input fields that are interactive. The use of the addEventListener method with the input event is crucial for handling this 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 subsequent image illustrates the output generated by the oninput functions.
Conclusion
The oninput event serves as an essential tool for facilitating user interaction and performing validation tasks. It is primarily utilized in the context of forms and the collection of user data.