Sự kiện oninput

Sự kiện DOM InputEvent

Định nghĩa và cách sử dụng

Sự kiện oninput xảy ra khi phần tử nhận được đầu vào của người dùng.

Sự kiện này xảy ra khi giá trị của phần tử <input> hoặc <textarea> thay đổi.

Lưu ý:Sự kiện này tương tự như Sự kiện onchange。Sự khác biệt là sự kiện oninput xảy ra ngay lập tức sau khi giá trị của phần tử thay đổi, trong khi onchange xảy ra khi phần tử mất焦点 và nội dung thay đổi. Một sự khác biệt khác là sự kiện onchange cũng áp dụng cho phần tử <select>.

Mô hình

Ví dụ 1

Khi người dùng viết nội dung vào trường <input>, thực hiện JavaScript:

<input type="text" oninput="myFunction()">

Thử ngay

Ví dụ 2

Thanh trượt range - Cách cập nhật động giá trị thanh trượt:

<input type="range" oninput="myFunction(this.value)">

Thử ngay

Cú pháp

Trong HTML:

<element oninput="myScript">

Thử ngay

Trong JavaScript:

object.oninput = function(){myScript};

Thử ngay

Trong JavaScript, sử dụng phương thức addEventListener():

object.addEventListener("input", myScript);

Thử ngay

Ghi chú:Internet Explorer 8 hoặc sớm hơn không hỗ trợ Phương thức addEventListener()。

Chi tiết kỹ thuật

Bubbling: Hỗ trợ
Có thể hủy: Không hỗ trợ
Loại sự kiện: Sự kiện, InputEvent
Thẻ HTML được hỗ trợ: <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type="number">, <input type="password">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week"> và <textarea>
Phiên bản DOM: Sự kiện Level 3

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ sự kiện này hoàn toàn.

Sự kiện Chrome IE Firefox Safari Opera
oninput Hỗ trợ 9.0 4.0 5.0 Hỗ trợ
Sự kiện DOM InputEvent