Javascript oninput函数

oninput函数适用于html输入标签上的文本、选择和用户输入的数据。当您可以输入数据时，根据要求，该函数使用javascript来改变功能。当输入完成插入数据或停止关注输入标签时，Javascript停止功能。

Javascript和html支持输入、选择和文本区域标签的oninput功能。此功能取决于用户界面。我们可以添加验证和用户限制以实现更好的应用操作。我们可以将其用于文本、密码和其他用户信息。

使用该函数的方法

有三种使用Javascript中oninput函数的方法：使用仅Javascript、Html与Javascript、以及Javascript与addEventListener。

Javascript中的oninput函数
Html与Javascript中的oninput函数
Javascript中的oninput函数与addEventListener

Javascript中的oninput函数

该函数直接在Javascript中使用oninput函数选择器。事件验证使用在函数名称中使用的Javascript。

语法

以下语法在网页中用于操作oninput函数。

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

示例

以下示例展示了javascript中Oninput函数的操作和工作流程。

示例1：

在这个示例中，我们可以使用具有oninput事件和脚本标签中的函数的html标记。在这里，函数用于为交互用户字段添加验证。

<!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>

输出

下图显示了oninput函数的输出信息。

Javascript oninput函数

示例2：

在这个示例中，我们可以使用带有oninput事件和在script标签内的函数的html标签。在这里，该函数用于为文本区输入字段添加验证。

<!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>

输出：

下面的图片展示了oninput函数的输出信息。

Javascript oninput函数

示例3：

在这个示例中，我们可以使用oninput事件和script标签中的函数。当我们使用下拉框选择数据时，函数将起作用。

<!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>

输出

下面的图片显示了oninput函数的输出信息。

Javascript oninput函数

在HTML中使用JavaScript的oninput功能

该事件使用HTML输入标签，如input、select和textarea。该函数在脚本标签或js页面中与验证一起使用。

语法

语法直接在HTML标签中使用oninput函数和函数名称。

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

示例

以下示例展示了使用JavaScript在HTML中使用Oninput函数的操作和工作过程。

示例1：

在这个示例中，我们可以在HTML标签中使用oninput，并在script标签中使用函数。在这里，函数用于对交互用户字段添加验证。

<!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>

输出

下面的图片显示了oninput函数的输出信息

Javascript oninput函数

示例2：

在这个示例中，我们可以使用input标签中的oninput属性和在script标签中使用的函数。这里，函数用于为交互式用户字段的密码类型添加验证。

<!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>

输出

以下图片显示了oninput函数的输出信息

Javascript oninput函数

示例3：

在此示例中，Javascript函数用于输入范围。当范围选择在HTML标签中时，oninput事件起作用。

<!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>

输出

以下图像显示了oninput函数的输出信息

Javascript oninput函数

在JavaScript中使用addEventListener()的oninput函数

此函数与选择器一起在addEventListener()方法中使用。”input”关键字是必要的，以使用JavaScript函数名称操作oninput函数。

语法

下面的语法显示了使用addEventListener()方法的oninput事件。

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

示例

以下示例展示了javascript中Oninput函数的操作和工作过程，以及其与addEventListener的结合使用。

示例1：

在这个示例中，我们可以使用html标签和script标签中的oninput事件和函数。在这里，函数用于为交互式用户字段添加验证。使用input关键字的添加事件监听器方法对于script标签中的事件非常重要。

<!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>

输出:

以下图像显示了oninput函数的输出信息

Javascript oninput函数

示例2：

在示例中，我们可以使用带有oninput事件和script标签中的函数的html标记。在这里，函数用于为交互式用户字段添加验证。在script标签中的事件中，使用input关键字的add event listener方法非常重要。

<!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>

输出

以下图像显示了oninput函数的输出信息

Javascript oninput函数