Javascript 中的 oninput 函数

2025 年 3 月 18 日 | 阅读 7 分钟

oninput 函数作用于用户在 html input 标签中输入的文本、选项和数据。当您输入数据时，该函数会根据 JavaScript 的要求更改功能。当输入完成后或焦点离开 input 标签时，JavaScript 会停止该功能。

JavaScript 和 HTML 都支持 input、select 和 textarea 标签的 oninput 功能。此功能取决于用户界面。我们可以添加验证和用户限制以改善应用程序操作。我们可以将其用于文本、密码和其他用户信息。

使用该函数的方法

在 JavaScript 中使用 oninput 函数有三种方法。我们可以通过三种方式使用该函数：仅使用 JavaScript、HTML 与 JavaScript 结合使用，以及使用 addEventListener 的 JavaScript。

JavaScript 中的 oninput 函数
HTML 与 JavaScript 结合的 oninput 函数
使用 addEventListener 的 JavaScript 中的 oninput 函数

JavaScript 中的 oninput 函数

该函数直接在 JavaScript 中使用带有 oninput 函数的选择器。事件验证在 JavaScript 中使用函数名进行。

语法

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

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

示例

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

示例 1

在示例中，我们可以在 script 标签中使用带有 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 函数的输出信息。

示例 2

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

<!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 函数的输出信息。

示例 3

在示例中，我们可以在 script 标签中使用 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 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 函数的输出信息。

HTML 与 JavaScript 结合的 oninput 函数

该事件使用 HTML input 标签，例如 input、select 和 textarea。该函数在 script 标签或 JS 页面中使用，并带有验证。

语法

语法直接在 HTML 标签中使用 oninput 函数，并带有函数名。

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

示例

以下示例展示了 HTML 与 JavaScript 结合的 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 函数的输出信息

示例 2

在示例中，我们可以在 input 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. 
<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 函数的输出信息

Example3

在此示例中，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 函数的输出信息

使用 addEventListener 的 JavaScript 中的 oninput 函数

该函数与选择器一起在 addEventListener() 方法中使用。“input”关键字对于使用 JavaScript 函数名操作 oninput 函数至关重要。

语法

以下语法展示了带有 addEventListener() 方法的 oninput 事件。

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

示例

以下示例展示了使用 addEventListener 的 JavaScript 中的 oninput 函数的操作和工作流程。

示例 1

在示例中，我们可以在 script 标签中使用带有 oninput 事件和函数的 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. </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 函数的输出信息

示例 2

<!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 函数的输出信息

结论

oninput 事件对于用户交互和验证非常有用。它主要用于表单和用户信息。

下一个主题如何在 JavaScript 中获取父元素

Javascript 中的 oninput 函数

使用该函数的方法

JavaScript 中的 oninput 函数

HTML 与 JavaScript 结合的 oninput 函数

使用 addEventListener 的 JavaScript 中的 oninput 函数

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

Javascript 中的 oninput 函数

使用该函数的方法

JavaScript 中的 oninput 函数

HTML 与 JavaScript 结合的 oninput 函数

使用 addEventListener 的 JavaScript 中的 oninput 函数

结论

相关帖子

JavaScript 中的现实生活递归

JavaScript 设计模式

使用 Filterizr.js 进行可过滤的图库

创建 JavaScript 倒计时计时器

JavaScript 中的随机图像生成器

Underscore.js _.filter 函数

Javascript Mouseenter 和 mouseleave 事件

Npm 更新库和 Npm 列表

如何使用 JavaScript 计算圆的周长和面积

如何使用 JavaScript 在网站上添加 WhatsApp 分享按钮

订阅 Tpoint Tech

联系信息