JavaScript 中的文本框事件

Abid Ullah 2023年1月30日 2022年5月10日
  1. JavaScript 中的文本框 oninput 事件
  2. JavaScript 中的文本框 oninvalid 事件
JavaScript 中的文本框事件

在 JavaScript 应用程序中,用户界面是用户交互的网页部分。我们输入的文本和我们点击的按钮组合起来形成一个用户界面。

在 JavaScript 中,我们有文本框事件,它们是在浏览器中发生的动作。我们通过输入输入并在文本框中提交表单来触发这些事件。

我们分配一个事件处理程序来响应和处理 JavaScript 中的这些事件。用户对任何表单元素的操作在 JavaScript 中都被视为一个事件,包括鼠标移动、鼠标点击、键盘输入等。

事件处理程序是我们与用户界面元素类别的事件相关联的 JavaScript 文本。创建事件处理程序的最常见方法是指定一个函数,以便在事件发生时首先执行。

本文将讨论使用可编​​辑输入的 oninputoninvalid 属性。

JavaScript 中的文本框 oninput 事件

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 事件

我们在 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 文本框事件的方式。

Author: Abid Ullah
Abid Ullah avatar Abid Ullah avatar

My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.

LinkedIn

相关文章 - JavaScript Event