Thực thi script khi phần tử nhận nhập liệu (oninput) trong HTML?

Sự kiện oninput kích hoạt ngay lập tức khi giá trị của <input>, <textarea>, <select> thay đổi do người dùng nhập (gõ, dán, xóa, chọn). Khác với onchange (chỉ khi mất focus và giá trị thay đổi).

Ví dụ

<!DOCTYPE html>
<html>
  <body>
    <p>Viết tên của bạn:</p>
    <input type="text" id="myid" oninput="display()">
    <p id="test"></p>
    <script>
      function display() {
        var p = document.getElementById("myid").value;
        document.getElementById("test").innerHTML = "Câu trả lời: " + p;
      }
    </script>
  </body>
</html>

So sánh oninput vs onchange

Lưu ý

• oninput không kích hoạt khi thay đổi giá trị bằng JS (el.value = 'x') — phải dispatch event thủ công.
• Trên <select>: onchange phổ biến hơn (chọn xong mới thay đổi).
• Dùng addEventListener('input', ...) thay vì attribute inline.