CodeGym /Adesua ahorow /Frontend SELF TW /表單事件

表單事件

Frontend SELF TW

等級 9 , 課堂 3

開放

9.1 主要的表單事件

要想讓表單具有功能性，首先得了解如何管理事件，這些事件發生在用戶與表單元素互動時。下面我們會仔細看看HTML表單的主要事件，如何用JavaScript處理這些事件，以及它們的使用例子。

在HTML中，表單能生成各種事件，這些事件在用戶與表單元素進行互動時發生，例如輸入框、按鈕、勾選框和單選按鈕。主要的表單事件包括：

submit — 表單提交事件
reset — 表單重置事件
focus — 當元素獲得焦點時的事件
blur — 當元素失去焦點時的事件
change — 當表單元素的值改變時的事件
input — 在表單元素中輸入數據時的事件
select — 當文本在表單元素中被選取時的事件

9.2 submit事件

submit事件發生在表單提交時，通常在用戶點擊表單中的"Submit"按鈕時觸發。處理這個事件可以讓我們在數據發送到服務器之前進行驗證、阻止錯誤輸入時的發送，或執行其他操作。

submit事件的處理範例：

HTML

    
        <form id="my-form" action="/submit" method="post">
          <label for="username">用戶名:</label>
          <input type="text" id="username" name="username">
          <button type="submit">提交</button>
        </form>

JavaScript

    
      const form = document.getElementById('my-form');

      form.addEventListener('submit', function(event) {
        const username = document.getElementById('username').value;
        if (username === '') {
          alert('請輸入用戶名。');
          event.preventDefault(); // 阻止表單提交
        } else {
          alert(`收到的用戶名: ${username}`);
          event.preventDefault();
        }
      });

JavaScript

    
      const form = document.getElementById('my-form');

      form.addEventListener('submit', function(event) {
        const username = document.getElementById('username').value;
        if (username === '') {
          alert('請輸入用戶名。');
          event.preventDefault(); // 阻止表單提交
        }
      });

9.3 reset事件

reset事件發生在表單恢復到初始狀態時，通常是用戶點擊"Reset"按鈕後。處理這個事件可以在表單重置時進行其他操作，比如清除錯誤信息。

reset事件的處理範例：

HTML

    
      <div style="min-height: 220px">
        <form id="my-form">
          <label for="name">Name:</label>
          <br>
          <input type="text" id="name" name="name">
          <br><br>
          <label for="email">Email:</label>
          <br>
          <input type="email" id="email" name="email">
          <br><br>
          <label for="password">Password:</label>
          <br>
          <input type="password" id="password" name="password">
          <div style="margin-top: 10px">
            <button id="btn" type="button">重置</button>
          </div>
        </form>
        <p id="log"></p>
      </div>

HTML

    
      <form id="my-form">
        <label for="name">Name:</label>
        <br>
        <input type="text" id="name" name="name">
        <br><br>
        <label for="email">Email:</label>
        <br>
        <input type="email" id="email" name="email">
        <br><br>
        <label for="password">Password:</label>
        <br>
        <input type="password" id="password" name="password">
        <div style="margin-top: 10px">
          <button type="reset">重置</button>
        </div>
      </form>
      <p id="log"></p>

JavaScript

    
      const form = document.getElementById('my-form');
      const btn = document.getElementById('btn');
      const n = document.getElementById('name');
      const e = document.getElementById('email');
      const p = document.getElementById('password');
      const log = document.getElementById('log');

      document.addEventListener('DOMContentLoaded', () => {
        n.value = "John";
        e.value = "john@mail.com";
        p.value = "qwerty";
      });

      btn.addEventListener('click', () => {
        n.value = "";
        e.value = "";
        p.value = "";
        log.textContent = '表單已被重置！';
      });

JavaScript

    
      const form = document.getElementById('my-form');
      const log = document.getElementById('log');

      form.addEventListener('reset', function () {
        log.textContent = '表單已被重置！';
      });

9.4 focus和blur事件

focus和blur事件分別發生在表單元素獲得和失去焦點時。這些事件常用來改善用戶與表單的互動，比如顯示提示信息或錯誤信息。

focus事件的處理範例：

HTML

    
      <div style="min-height: 55px">
        <form id="my-form">
          <label for="username">用戶名:</label>
          <input type="text" id="username" name="username">
          <div id="username-hint" style="display: none;">
            當聚焦到輸入框時，你會看到這個提示。
            即使焦點轉移後，它仍然會顯示。
          </div>
        </form>
      </div>

HTML

    
      <form id="my-form">
        <label for="username">用戶名:</label>
        <input type="text" id="username" name="username">
        <div id="username-hint" style="display: none;">
          當聚焦到輸入框時，你會看到這個提示。
          即使焦點轉移後，它仍然會顯示。
        </div>
      </form>

JavaScript

    
      const form = document.getElementById('my-form');
      const usernameInput = document.getElementById('username');
      const hint = document.getElementById('username-hint');

      form.addEventListener("submit", (event) => {
        event.preventDefault();
      });

      usernameInput.addEventListener('focus', function (event) {
        hint.style.display = 'block';
      });

JavaScript

    
      const usernameInput = document.getElementById('username');
      const hint = document.getElementById('username-hint');

      usernameInput.addEventListener('focus', function () {
        hint.style.display = 'block';
      });

blur事件的處理範例：

HTML

    
      <div style="min-height: 55px">
        <form id="my-form">
          <label for="username">用戶名:</label>
          <input type="text" id="username" name="username">
          <div id="username-error" style="display: none; color: red;">
            只有當輸入框在丟失焦點後是空的時，才會顯示錯誤
          </div>
        </form>
      </div>

HTML

    
      <form id="my-form">
        <label for="username">用戶名:</label>
        <input type="text" id="username" name="username">
        <div id="username-error" style="display: none; color: red;">
          只有當輸入框在丟失焦點後是空的時，才會顯示錯誤
        </div>
      </form>

JavaScript

    
      const form = document.getElementById('my-form');
      const usernameInput = document.getElementById('username');
      const error = document.getElementById('username-error');

      form.addEventListener("submit", (event) => {
        event.preventDefault();
      });

      usernameInput.addEventListener('blur', function (event) {
        error.style.display = usernameInput.value === '' ? 'block' : 'none';
      });

JavaScript

    
      const usernameInput = document.getElementById('username');
      const error = document.getElementById('username-error');

      usernameInput.addEventListener('blur', function () {
        error.style.display = usernameInput.value === '' ? 'block' : 'none';
      });

9.5 input事件

input事件每當表單元素的值改變時都會發生，不論元素是否失去焦點。這事件常用於即時驗證用戶的輸入，例如實時檢查輸入框的有效性。

input事件的處理範例：

HTML

    
      <html lang="ru">
        <head>
          <style>
            input {
              outline: none;
            }

            .valid {
              border-color: green;
            }

            .invalid {
              border-color: red;
            }

            .wrapper-valid::after {
              content: "Email是有效的";
              margin-left: 5px;
              color: green;
            }

            .wrapper-invalid::after {
              content: "Email是無效的";
              margin-left: 5px;
              color: red;
            }
          </style>
        </head>
        <body>
          <form id="my-form">
            <label for="email">Email:</label>
            <div id="wrapper">
              <input type="email" id="email" name="email">
            </div>
          </form>
        </body>
      </html>

JavaScript

    
      const form = document.getElementById('my-form');
      const inputWrapper = document.getElementById('wrapper');
      const emailInput = document.getElementById('email');

      form.addEventListener("submit", (event) => {
        event.preventDefault();
      });

      emailInput.addEventListener('input', function () {
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (emailPattern.test(emailInput.value)) {
          inputWrapper.classList.add('wrapper-valid');
          inputWrapper.classList.remove('wrapper-invalid');
          emailInput.classList.add('valid');
          emailInput.classList.remove('invalid');
        } else {
          inputWrapper.classList.add('wrapper-invalid');
          inputWrapper.classList.remove('wrapper-valid');
          emailInput.classList.add('invalid');
          emailInput.classList.remove('valid');
        }
      });

JavaScript

    
      const emailInput = document.getElementById('email');
      const inputWrapper = document.getElementById('wrapper');

      emailInput.addEventListener('input', function () {
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (emailPattern.test(emailInput.value)) {
          emailInput.classList.add('valid');
          emailInput.classList.remove('invalid');
        } else {
          emailInput.classList.add('invalid');
          emailInput.classList.remove('valid');
        }
      });

9.6 select事件

select事件發生在用戶在表單元素中選取文本時，例如在輸入框或文本區中。這個事件可以用來執行一些在文本被選取時的操作，如顯示一個拷貝按鈕。

select事件的處理範例：

HTML

    
      <div style="min-height: 55px">
        <form id="my-form">
          <label for="text-input">輸入文字:</label>
          <input type="text" id="text" name="text">
          <div id="select-message"></div>
        </form>
      </div>

HTML

    
      <form id="my-form">
        <label for="text-input">輸入文字:</label>
        <input type="text" id="text" name="text">
        <div id="select-message"></div>
      </form>

JavaScript

    
      document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('my-form');
        const textInput = document.getElementById('text');
        const selectMessage = document.getElementById('select-message');

        form.addEventListener("submit", (event) => {
          event.preventDefault();
        });

        textInput.addEventListener('select', function () {
          selectMessage.textContent = '你選取了文字！';
        });
      });

JavaScript

    
      document.addEventListener('DOMContentLoaded', function () {
        const textInput = document.getElementById('text');
        const selectMessage = document.getElementById('select-message');

        textInput.addEventListener('select', function () {
          selectMessage.textContent = '你選取了文字！';
        });
      });

9.7 change事件

change事件當表單元素的值改變並且用戶離開該元素（失去焦點）時發生。這事件常用於檢查表單元素的更改，例如下拉列表或勾選框。

change事件的處理範例：

HTML

    
      <form id="my-form">
        <label for="color-select">選擇顏色:</label>
        <select id="color-select" name="color">
          <option value="red">紅色</option>
          <option value="green">綠色</option>
          <option value="blue">藍色</option>
        </select>
      </form>

JavaScript

    
      document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('my-form');
        const selectElement = document.getElementById('color-select');

        form.addEventListener("submit", (event) => {
          event.preventDefault();
        });

        selectElement.addEventListener('change', function () {
          alert('你選擇的顏色: ' + selectElement.value);
        });
      });

JavaScript

    
      document.addEventListener('DOMContentLoaded', function () {
        const selectElement = document.getElementById('color-select');

        selectElement.addEventListener('change', function () {
          alert('你選擇的顏色: ' + selectElement.value);
        });
      });

先前先前課堂

下一個下一堂課

留言

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION