HTML onChange事件的使用和實例

在前端開發過程中，改變表單輸入的內容時，可能需要觸發某些事件，稱為onChange事件。而onChange事件是HTML的一部分，它可以用於input，select和textarea元素。
下面我們將具體探討onChange事件的使用方法和相關實例。

一、onChange事件的基本用法

我們可以通過如下代碼使用onChange事件：

  
  <input type="text" onChange="updateValue(event)">

其中，input元素有一個onChange屬性指向了事件處理函數updateValue()。事件處理函數可以通過參數event獲取事件對象。

下面是一個簡單的例子，在輸入框中輸入內容，並在旁邊顯示當前輸入的值。

  
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>onChange Demo</title>
  </head>
    <body>
    <p>Please input your name:</p>
    <input type="text" onChange="showName(event)">
    <p id="name"></p>
    <script>
      function showName(event) {
        var value = event.target.value;
        document.getElementById("name").innerHTML = value;
      }
    </script>
  </body>
  </html>

運行這個例子，可以看到輸入框旁邊實時顯示所輸入的內容。

二、onChange事件在下拉列表中的應用

下拉列表與輸入框的事件處理方式有所不同，我們需要對元素的選項進行操作。

  
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>onChange Demo</title>
  </head>
  <body>
    <p>Please choose your favorite fruit:</p>
    <select id="fruit" onChange="showFruit(event)">
      <option value="Apple">Apple</option>
      <option value="Banana">Banana</option>
      <option value="Cherry">Cherry</option>
      <option value="Orange">Orange</option>
    </select>
    <p id="fruitName"></p>
    <script>
      function showFruit (event) {
        var index = event.target.selectedIndex;
        var fruit = event.target.options[index].value;
        document.getElementById("fruitName").innerHTML = "Your favorite fruit is " + fruit;
      }
    </script>
  </body>
  </html>

運行該代碼，選擇不同的選項，可以在下方顯示所選擇的水果名稱。

三、onChange事件在文本域的應用

在文本域中，我們可以通過onChange事件來實時顯示輸入框中的文字數量。代碼如下：

  
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>onChange Demo</title>
  </head>
  <body>
      <p>Please leave your message:</p>
      <textarea id="message" cols="30" rows="10" onChange="countWords(event)"></textarea>
      <p>Your message has <span id="wordCount"></span> words.</p>
    <script>
      function countWords(event) {
        var text = event.target.value;
        var count = text.split(" ").length;
        document.getElementById("wordCount").innerHTML = count;
      }
    </script>
  </body>
  </html>

運行這個代碼，可以實時顯示所輸入文字的數量。

四、onChange事件搭配其他事件的應用

我們可以通過組合使用onChange和其他事件，來實現一些更多功能。

下面是一個例子，多個輸入框可以通過change事件聯動。即：輸入一個輸入框的內容，其他輸入框的內容也隨之修改。

  
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>onChange Demo</title>
  </head>
  <body>
    <h2>OnChange Example</h2>
    <div>
      <input type="text" id="input1" data-link="input2">
      <input type="text" id="input2" data-link="input1">
    </div>
    <script>
      var inputs = document.getElementsByTagName("input");
      for (i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener("change", function(event) {
          var target = event.currentTarget;
          var link = target.getAttribute("data-link");
          var linked = document.getElementById(link);
          linked.value = target.value;
        })
      }
    </script>
  </body>
  </html>

該代碼可以實現兩個輸入框的同步聯動。

五、結語

以上就是關於HTML onChange事件的使用和實例的詳細介紹。通過不同的應用，onChange事件可以增強網頁交互性，給用戶帶來更好的用戶體驗。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/183496.html