JavaScript 中的文字框事件

Abid Ullah 2023年1月30日 2022年5月10日 JavaScript JavaScript Event
  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

  • 在 Onclick 事件中呼叫多個 JavaScript 函式
  • 在 JavaScript 中的 HTML 影象標籤上新增 Onclick 事件
  • 使用 JavaScript 模擬點選
  • JavaScript 中的事件目標
  • 用 JavaScript 在 iframe 中實現一個 onload 事件
  • 在 JavaScript 中檢測鍵盤輸入事件