JavaScript 中的文本框事件
在 JavaScript 应用程序中，用户界面是用户交互的网页部分。我们输入的文本和我们点击的按钮组合起来形成一个用户界面。
在 JavaScript 中，我们有文本框事件，它们是在浏览器中发生的动作。我们通过输入输入并在文本框中提交表单来触发这些事件。
我们分配一个事件处理程序来响应和处理 JavaScript 中的这些事件。用户对任何表单元素的操作在 JavaScript 中都被视为一个事件，包括鼠标移动、鼠标点击、键盘输入等。
事件处理程序是我们与用户界面元素类别的事件相关联的 JavaScript 文本。创建事件处理程序的最常见方法是指定一个函数，以便在事件发生时首先执行。
本文将讨论使用可编辑输入的 oninput 和 oninvalid 属性。
oninput 事件在元素获得用户输入时发生。此事件仅在 <input> 或 <textarea> 元素的值发生更改时发生。
以下示例代码演示了从用户获取输入的 oninput 事件。
<!DOCTYPE html>
<html>
<body>
<p>Using oninput event to get input.</p>
<p>Enter input to trigger the function.</p>
Enter the name: <input type="text" id="myinput" value="John">
<script>
document.getElementById("myinput").oninput = function() {myFunc()};
function myFunc() {
alert("The value of the input was changed.");
}
</script>
</body>
</html>
正如我们在代码中看到的，我们将输入值分配给 Jon 并创建了一个名为 myFunction() 的函数。更改输入或文本区域元素时调用此函数。
因此，当我们运行代码并更改输入元素时，我们会收到一条消息：输入字段的值已更改。通过改变输入元素，oninput 事件发生。
我们在 JavaScript 中有另一个名为 oninvalid 的文本框事件。当用户输入的可提交输入元素无效时，会发生此事件。
例如，当用户点击提交按钮但未填写时，required 属性指定必须在提交表单之前填写输入内容。在这种情况下，会发生 oninvalid 事件。
让我们使用下面的代码示例来理解这个事件。
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
Name: <input type="text" oninvalid="alert('You must fill out the form!');" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
an alert message will occur.</p>
<p><strong>Note:</strong> The oninvalid event is not supported in Internet Explorer 9 and earlier.</p>
</body>
</html>
我们在代码中指定了 You must fill out the form 的条件，因此用户必须在单击提交按钮之前输入一些内容。
当我们运行代码，并且用户在没有填写输入部分的情况下点击提交按钮时，oninvalid 事件将被调用，并向用户显示一条警告消息。这就是我们使用 JavaScript 使用 oninvalid 文本框事件的方式。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
