Sự kiện oninput
Thí dụ
Thực thi JavaScript khi người dùng viết nội dung nào đó trong trường <input>:
<input type="text" oninput="myFunction()">
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Sự kiện oninput xảy ra khi một phần tử được người dùng nhập vào.
Sự kiện này xảy ra khi giá trị của phần tử <input> hoặc <textareosystem được thay đổi.
Mẹo: 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 sau khi giá trị của một phần tử đã thay đổi, trong khi sự thay đổi xảy ra khi phần tử mất tiêu điểm, sau khi nội dung đã được thay đổi. Sự khác biệt khác là sự kiện onchange cũng hoạt động trên các phần tử <select>.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ sự kiện.
| Event | |||||
|---|---|---|---|---|---|
| oninput | Yes | 9.0 | 4.0 | 5.0 | Yes |
Cú pháp
Trong HTML:
<element oninput="myScript">
Trong JavaScript:
object.oninput = function(){myScript};
Trong JavaScript, sử dụng phương thức addEventListener ():
object.addEventListener("input", myScript);
Lưu ý: Phương thức addEventListener () không được hỗ trợ trong Internet Explorer 8 và các phiên bản trước đó.
Chi tiết kỹ thuật
| Bong bóng: | Đúng |
|---|---|
| Có thể hủy bỏ: | Không |
| Loại sự kiện: | Sự kiện , InputEvent |
| Các 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à <textareosystem |
| Phiên bản DOM: | Sự kiện cấp 3 |
Các ví dụ khác
Thí dụ
Thanh trượt phạm vi - cách cập nhật động giá trị thanh trượt:
<input type="range" oninput="myFunction(this.value)">