Đối tượng InputEvent trong HTML DOM đại diện cho tất cả các sự kiện liên quan đến thay đổi nội dung của một phần tử biểu mẫu (form element).
Các thuộc tính
Đối tượng InputEvent có thể có các thuộc tính/phương thức sau:
| Thuộc tính/Phương thức | Mô tả |
|---|---|
| data | Trả về chuỗi ký tự tương ứng với ký tự được chèn. |
| dataTransfer | Trả về đối tượng chứa thông tin về dữ liệu được chèn/xóa. |
| getTargetRanges() | Trả về mảng chứa các phạm vi mục tiêu sẽ bị ảnh hưởng bởi chèn/xóa. |
| inputType | Trả về loại nhập liệu. |
| isComposing | Trả về trạng thái của sự kiện (đang soạn thảo hay không). |
Ví dụ
Ví dụ minh họa thuộc tính InputEvent data:
<!DOCTYPE html> <html> <head> <title>InputEvent Data</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>InputEvent-Data</legend> <label>Điền vào chỗ trống: <input type="text" id="textSelect" placeholder="__ for Apple" oninput="getEventData(event)"> </label> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var textSelect = document.getElementById("textSelect"); function getEventData(InputEvent) { if(InputEvent.data === 'A') divDisplay.textContent = 'Correct Answer'; else divDisplay.textContent = 'Try Again, '+textSelect.placeholder; textSelect.textContent = ''; } </script> </body> </html>
Kết quả
Trước khi nhập bất kỳ ký tự nào vào trường văn bản:
Sau khi nhập đáp án sai:
Sau khi nhập đáp án đúng:
